Slider
Single-thumb slider inspired by Radix Slider, exposing
data-orientation and data-disabled for styling while supporting ticks and hit-area padding.Anatomy
Compose
Slider.Root, Slider.Track, Slider.Range, and Slider.Thumb to build any visual you need.API Reference
Root
Provides state management plus pointer/keyboard logic. Forward any native
div props (event handlers, className, etc.) to customize it.| Prop | Type | Default |
|---|---|---|
| value | number | - |
| defaultValue | number | min |
| onValueChange | (value: number) => void | - |
| min | number | 0 |
| max | number | 100 |
| step | number | 1 |
| orientation | "horizontal" | "vertical" | "horizontal" |
| disabled | boolean | false |
| ticks | number[] | - |
| hitAreaPadding | number | 0 |
| children | React.ReactNode | - |
| Data Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
| data-disabled | "" |
Track
Visual rail that the thumb slides on. Clicking the track moves the thumb toward the pointer using the same snapping rules as dragging.
| Prop | Type | Default |
|---|---|---|
| children / div props | HTMLAttributes<HTMLDivElement> | - |
| Data Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
| data-disabled | "" |
Range
Highlights the distance between
min and the current value. Its positioning is handled automatically by the root.| Prop | Type | Default |
|---|---|---|
| children / div props | HTMLAttributes<HTMLDivElement> | - |
| Data Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
| data-disabled | "" |
Thumb
Interactive handle with full keyboard support (arrow, page, home/end keys). Consume
data-orientation to adjust transforms per axis.| Prop | Type | Default |
|---|---|---|
| children / span props | HTMLAttributes<HTMLSpanElement> | - |
| Data Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
| data-disabled | "" |