Skip to content


A slider input widget.



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.


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

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

Create a new slider with options provided explicitly:

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


new Slider(options)

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



The HTML element containing the slider input.