components
Slider
A single-thumb range control built on Radix Slider. The filled range uses the primary tone and the thumb carries a large 44px touch target around a 24px visual circle, so it stays easy to grab on a phone. Motion is limited to a calm focus ring and respects reduced motion.
Basic
With label and value
Volume60
Custom range and step
Min 0, max 100, step 5.
Text size40
Disabled
Brightness30
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | none | Controlled value. |
| defaultValue | number | none | Uncontrolled initial value. |
| onValueChange | (v: number) => void | none | Fires as the thumb moves. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Increment between stops. |
| label | ReactNode | none | Label above the track. Also names the thumb. |
| showValue | boolean | false | Show the current value beside the label. |
| disabled | boolean | false | Disable the control. |