Skip to content

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 predicate of the form column = value will be added to the selection.
  • from: The name of the backing database table or view.
  • column: The backing database column this slider represents. If specified, the slider range will be set to the minimum and maximum column values.
  • label: A text label for the slider input. If unspecified, the column name (if provided) will be used by default.
  • min: The minimum slider value.
  • max: The maximum slider value.
  • step: The increment to apply between adjacent slider values.
  • value: The initial value of the slider. Defaults to the value of any param or selection provided via the as option.
  • width: The width of the slider in pixels.
  • element: The container DOM element. If unspecified, a new div 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.