Appearance

Slider ​

A slider input widget.

slider ​

slider(options)

Return a new slider component with the provided options. Creates an instance of the Slider class, connects it to coordinator, and returns the corresponding HTML element.

The supported options are:

  • as: A Param or Selection that this slider should update. For a Param, the selected slider value is set to be the new param value. For a Selection, a selection clause will be added to the selection.
  • field: The database column name to use within generated selection clause predicates. Defaults to the column option.
  • select: The type of selection clause predicate to generate if the as option is a Selection. If 'point' (the default), the selection predicate is an equality check for the slider value. If 'interval', the predicate checks an interval from the minimum to the current slider value.
  • filterBy: A selection to filter the database table indicated by the from option.
  • from: The name of a database table to use as a data source for this widget. Used in conjunction with the column option. The minimum and maximum values of the column determine the slider range.
  • column: The name of a database column whose values determine the slider range. Used in conjunction with the from option. The minimum and maximum values of the column determine the slider range.
  • label: A text label for the slider input. If unspecified, the column name (if provided) is used by default.
  • min: The minimum slider value.
  • max: The maximum slider value.
  • step: The slider step, the amount to increment between consecutive values.
  • value: The initial value of the slider. Defaults to the value of a param provided via the as option.
  • width: The width of the slider in pixels.
  • element: The parent DOM element in which to place the slider elements. If undefined, a new div element is created.

Examples ​

Create a new slider with options pulled from table.foo in the backing database:

js
slider({ from: "table", column: "foo", as: param })

Create a new slider with options provided explicitly:

js
slider({ as: selection, min: 0, max: 10, step: 1 })

Slider ​

new Slider(options)

Class definition for a slider input that extends MosaicClient. The constructor accepts the same options as the slider method.

element ​

slider.element

The HTML element containing the slider input.