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.

Example Components

Range slider

Since the slider value prop accepts an array, you can create a range slider by passing in an array with multiple values, and use multiple thumbs to display the range. Here's an example of a range slider with two thumbs:

View code

Vertical slider

By setting the orientation prop to vertical, you can create a vertical slider. Here's an example:

View code

Slider ticks

You can add slider ticks using the ticks state and the tick element returned by createSlider.

View code

API Reference

createSlider

The builder function used to create the slider component.

Props

Prop	Default	Type / Description
`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.
`defaultValue`	`[]`	`number[]` The default value of the slider. Pass in multiple values for multiple thumbs, creating a range slider.
`value`	-	`Writable<number>` A writable store that can be used to update the slider value. See Bring Your Own Store
`onValueChange`	-	`ChangeFn<number>` A callback that is called when the value of the slider changes. See Change Functions

Elements

Element	Description
`root`	The builder store used to create the root slider element.
`slider`	An alias for the `root` builder store.
`range`	The builder store used to create the slider range element.
`thumb`	The builder store used to create the slider thumb element.
`tick`	The builder store used to create the slider tick element.

States

State	Description
`value`	A writable store that can be used to get the current value of the slider.
`ticks`	A readable store that can be used to get the current number of ticks.

Options

Option	Description
`min`	The minimum value of the slider.
`max`	The maximum value of the slider.
`step`	The amount to increment/decrement the value by when using the keyboard.
`orientation`	The orientation of the slider.
`disabled`	Whether or not the slider is disabled.

root

The slider component.

Data Attributes

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

thumb

The slider thumb component.

Data Attributes

Data Attribute	Value
`[data-melt-slider-thumb]`	Present on all slider thumb elements.
`[data-value]`	The current value of the thumb.

Custom Events

Event	Value
`m-keydown`	`(e: ) => void`

range

The slider range component.

Data Attributes

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

tick

The slider tick component.

Data Attributes

Data Attribute	Value
`[data-melt-slider-tick]`	Present on all slider tick elements.
`[data-value]`	The value at the tick's position.
`[data-bounded]`	Present when the tick is inside the active range.

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