Slider unstable parts for decoupling hidden input
To recompose, move, or exclude the visually hidden input that Slider.Thumb renders by default, use unstable parts (API may change in future release):
- Slider.unstable_ThumbProvider: Provides thumb state and accepts optional name for submitted value
- Slider.unstable_ThumbTrigger: The draggable thumb element
- Slider.unstable_BubbleInput: The visually hidden input that Slider.Thumb renders by default, can be omitted
```jsx
<Slider.Root defaultValue={[25, 75]}>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.unstable_ThumbProvider name="price[min]">
<Slider.unstable_ThumbTrigger />
<Slider.unstable_BubbleInput />
</Slider.unstable_ThumbProvider>
<Slider.unstable_ThumbProvider name="price[max]">
<Slider.unstable_ThumbTrigger />
<Slider.unstable_BubbleInput />
</Slider.unstable_ThumbProvider>
</Slider.Root>
```
Slider onValueCommit event
onValueCommit is useful when you only need to capture a final value, for example to update a backend service, rather than handling every change via onValueChange.
Slider touch and click on track support
Slider supports touch or click on track to update value.
Slider mouse events caveat
Due to a limitation in implementation, onMouseDown and onMouseUp event handlers on Slider.Root won't be fired. Use pointer events instead (e.g., onPointerDown, onPointerUp) as they are better suited for cross-platform/device handling and fire for all pointer input types (mouse, touch, pen, etc.).
Slider component anatomy
Slider is composed of Slider.Root, Slider.Track, Slider.Range, and Slider.Thumb parts. Slider.Root contains all parts. Slider.Track contains Slider.Range. Slider.Thumb can be rendered multiple times.
Slider Root props
Slider.Root props:
- asChild (boolean, default false): Change the default rendered element
- defaultValue (number[]): Initial value when uncontrolled
- value (number[]): Controlled value, must be used with onValueChange
- onValueChange (function): Event handler called when value changes
- onValueCommit (function): Event handler called when value changes at end of interaction
- name (string): Name submitted with form
- disabled (boolean, default false): Prevents user interaction
- orientation (enum 'horizontal' | 'vertical', default 'horizontal'): Slider orientation
- dir (enum 'ltr' | 'rtl'): Reading direction, inherits from DirectionProvider or defaults to LTR
- inverted (boolean, default false): Visually inverts the slider
- min (number, default 0): Minimum value for range
- max (number, default 100): Maximum value for range
- step (number, default 1): Stepping interval
- minStepsBetweenThumbs (number, default 0): Minimum permitted steps between multiple thumbs
- form (string): ID of form that slider belongs to
Slider Root renders hidden inputs for forms
Slider.Root will render an input for each thumb when used within a form to ensure events propagate correctly.
Slider Root data attributes
Slider.Root supports data attributes: [data-disabled] (present when disabled) and [data-orientation] (values: vertical, horizontal).
Slider Track component
Slider.Track is the track that contains Slider.Range. It supports asChild prop (boolean, default false). It has data attributes [data-disabled] and [data-orientation].
Slider Range component
Slider.Range is the range part and must live inside Slider.Track. It supports asChild prop (boolean, default false). It has data attributes [data-disabled] and [data-orientation].
Slider Thumb component
Slider.Thumb is a draggable thumb and you can render multiple thumbs. It supports asChild prop (boolean, default false). It has data attributes [data-disabled] and [data-orientation].
Slider supports multiple thumbs
Slider can be used with multiple thumbs by rendering multiple Slider.Thumb components.
Slider minStepsBetweenThumbs prevents thumb overlap
The minStepsBetweenThumbs prop (default 0) specifies the minimum permitted steps between multiple thumbs to prevent thumbs from having equal values.
Slider supports right-to-left direction
Slider supports Right to Left direction via the dir prop.
Slider vertical orientation example
To create a vertical slider, use orientation="vertical" prop on Slider.Root:
```jsx
<Slider.Root
className="SliderRoot"
defaultValue={[50]}
orientation="vertical"
>
<Slider.Track className="SliderTrack">
<Slider.Range className="SliderRange" />
</Slider.Track>
<Slider.Thumb className="SliderThumb" />
</Slider.Root>
```
For vertical sliders, set flex-direction: column on root, width: 3px and wrap vertical flex-grow for track.
Slider range example with multiple thumbs
To create a range slider with multiple thumbs, provide an array with multiple values and render multiple Slider.Thumb components:
```jsx
<Slider.Root defaultValue={[25, 75]}>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
<Slider.Thumb />
</Slider.Root>
```
Slider step prop example
To increase the stepping interval, use the step prop:
```jsx
<Slider.Root defaultValue={[50]} step={10}>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
</Slider.Root>
```
Slider minStepsBetweenThumbs example
To prevent thumb overlap, use minStepsBetweenThumbs:
```jsx
<Slider.Root defaultValue={[25, 75]} step={10} minStepsBetweenThumbs={1}>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
<Slider.Thumb />
</Slider.Root>
```
Slider onValueCommit callback bug fix
Fixed a bug where onValueCommit was not called when a slider thumb was dragged across another thumb.
Slider clamp thumb position within range
Clamp thumb position within range in Slider.
Slider.Root inverted prop
Slider.Root has an inverted prop to visually invert the slider.
Slider.Root onValueCommit prop
Slider.Root has an onValueCommit prop to better handle discrete value changes.
Slider unstable composition parts
Slider now exposes unstable composition parts: unstable_ThumbProvider, unstable_ThumbTrigger, and unstable_BubbleInput. These allow direct access and recomposition of the visually hidden inputs rendered for form submission.
Slider focusVisible support for non-keyboard interactions
Added focusVisible support for non-keyboard interactions with slider thumbs, for progressively enabling styles using :focus-visible alongside programmatic focus management.
Slider very small step values unresponsive thumbs
Fixed a bug where very small step values made the thumbs unresponsive.
Slider focus bugs in scrollable context
Fixed focus bugs for sliders in a scrollable context.
Slider form prop forwarding to bubble input
Forward the root form prop to each thumb's bubble input element to fix non-parent form submissions in Slider.
Slider prevents page scroll on Home and End keys
Slider no longer causes page scroll when using Home and End keys.
Slider default single value
A Slider can be created with a single default value by passing an array with one number to the defaultValue prop, for example defaultValue={[50]}.
Slider inherits from primitive
The Slider component in the themes package inherits props from the Slider primitive and supports common margin props.
Slider size prop values
The size prop controls the size of the Slider and accepts values: 1, 2, and 3.
Slider variant prop values
The variant prop controls the visual style of the Slider and accepts values: surface, classic, and soft.
Slider color prop
The color prop assigns a specific color to the Slider. Valid colors include indigo, cyan, orange, crimson, and gray.
Slider highContrast prop
The highContrast prop is a boolean that increases color contrast in light mode when set to true.
Slider radius prop values
The radius prop assigns a specific radius value to the Slider and accepts values: none, small, and full.
Slider range with multiple values
A range slider can be created by providing multiple values to the defaultValue prop, for example defaultValue={[25, 75]}.