Slider
An input where the user selects a value from within a given range
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:
Vertical slider
By setting the orientation
prop to vertical
, you can create a vertical slider. Here's an
example:
Slider ticks
You can add slider ticks using the ticks
state and the tick
element returned by createSlider
.
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. |
onValueChange | - | ChangeFn<number> A callback that is called when the value of the slider changes. See Change Functions |
Elements
Element | Description |
The builder store used to create the root slider element. | |
An alias for the | |
The builder store used to create the slider range element. | |
The builder store used to create the slider thumb element. | |
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] |
|
[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 |
ArrowLeft | Increments/decrements by the |
ArrowUp | Increases the value by the |
ArrowDown | Decreases the value by the |
Home | Sets the value to its minimum |
End | Sets the value to its maximum |
On This Page