Search for a command to run...
A draggable value selector. Use for continuous numeric input (volume, opacity, range filters). Brand-tinted Range, circular thumb, supports single value or multi-thumb ranges.
Forwards every Radix Slider.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number[] | — | Uncontrolled initial value(s). Pass an array of N values to render N thumbs (range slider). |
value | number[] | — | Controlled value(s). Pair with onValueChange. |
onValueChange | (value: number[]) => void | — | Fires on every drag step. Use onValueCommit for the final value when interaction ends. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Increment per arrow key / drag step. |
orientation | "horizontal" | "vertical" | "horizontal" | Vertical sliders need a parent with a defined height; the slider stretches via min-h-40 and flexes column-wise. |
disabled | boolean | false | Dims the whole control and removes interaction. |
Reach for Slider when the value is continuous — volume, opacity, brightness, a $0–$1000
budget. Pair with a numeric readout so users can see the exact value.
Use a range slider (two thumbs via value={[min, max]}) for "between X and Y" filters like
price or date.
Set sensible steps — step={50} on a $1000 budget, step={0.05} on opacity. Default step=1
is too coarse for most real ranges.
Use onValueChange for live previews (e.g. updating a number readout as the user drags) and
onValueCommit for expensive side effects (network calls, validation).
Use a slider for discrete choices (low / medium / high). ToggleGroup or RadioGroup
communicate the choice space better.
Hide the current value. Users can't see "where they are" on a slider without an adjacent label or readout.
Stretch a slider to fill an entire row width when the value range is small (1–10). A short slider is easier to scan and reach with the mouse.