---
url: /mosaic/api/inputs/slider.md
---
# Slider

A slider input widget.

## slider {#slider-method}

`slider(options)`

Return a new slider component with the provided *options*.
Creates an instance of the [`Slider`](#slider-class) class, connects it to [`coordinator`](../core/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 {#slider-class}

`new Slider(options)`

Class definition for a slider input that extends [`MosaicClient`](../core/client).
The constructor accepts the same options as the [`slider`](#slider-method) method.

### element

`slider.element`

The HTML element containing the slider input.