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:

RTL

To enable Right-to-Left (RTL) support, you can set the rtl prop to `true. Here's an example of a horizontal slider with RTL enabled:

In a Right-to-Left (RTL) context, vertical sliders function from top-to-bottom instead of bottom-to top. Here's an example of a vertical slider with RTL enabled:

Slider ticks

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

Auto Sorting

By default, the value array is always automatically sorted. You can disable this behavior by setting autoSort to false, which will keep values in their original spot when thumbs are moved past each other.

autoSort: false; value: [30,40,50,60,70] 0 1 2 3 4
autoSort: true; value: [30,40,50,60,70] 0 1 2 3 4

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.
dir 'ltr'
'ltr' | 'rtl'

The direction of the slider.
autoSort true
boolean

Whether to automatically sort the values array when using multiple thumbs.
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

The builder store used to create the root slider element.

An alias for the root builder store.

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.
dir

The direction of the slider.
autoSort

Whether to automatically sort the values array when using multiple thumbs.
disabled

Whether or not the slider is disabled.

root

The slider component.

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'
[data-disabled]

Present when the slider is disabled.
[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