Slider

An input where the user selects a value from within a given range

View code

Features

Supports multiple thumbs
Can be controlled or uncontrolled
Supports a minimum value between thumbs
Supports both touch and click
Supports a custom step size
Can be vertical or horizontal

Usage

To create a slider, use the createSlider builder function. Follow the anatomy or the example above to create your slider.

API Reference

createSlider

Props

Prop	Default	Type / Description
`value`	`[]`	`number[]` The value of the slider.
`min`	`0`	`number` The minimum value of the slider.
`max`	`100`	`number` The maximum value of the slider.
`step`	`1`	`number` The amount to increment/decrement the value by when using the keyboard.
`orientation`	`'horizontal'`	`'horizontal' \| 'vertical'` The orientation of the slider.
`disabled`	`false`	`boolean` Whether or not the slider is disabled.

Returned Props

Returned Prop	Type	Description
`options`	`Writable<CreateSliderProps>`	A writable store that can be used to update the slider props.
`value`	`Writable<number[]>`	A writable store that can be used to update the slider value.
`root`	-	The builder store used to create the root slider element.
`range`	-	The builder store used to create the slider range element.
`thumb`	-	The builder store used to create the slider thumb element.

root

Data Attributes

Data Attribute	Value
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-melt-slider]`	Present on all slider elements.

thumb

Data Attributes

Data Attribute	Value
`[data-melt-slider-thumb]`	Present on all slider thumb elements.

range

Data Attributes

Data Attribute	Value
`[data-melt-slider-range]`	Present on all slider range elements.

Accessibility

Adheres to the Slider WAI-ARIA design pattern

Key	Behavior
`ArrowRight`	Increments/decrements by the `step` value depending on `orientation`.
`ArrowLeft`	Increments/decrements by the `step` value depending on `orientation`.
`ArrowUp`	Increases the value by the `step` amount.
`ArrowDown`	Decreases the value by the `step` amount.
`Home`	Sets the value to its minimum
`End`	Sets the value to its maximum

On This Page