Slider
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Loading…
Live#
Loading…
Decimal#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| showValue | boolean | undefined | — | Show the numeric value to the right of the track. |
| width | string | number | undefined | 240 | Pixel width or any CSS length. Defaults to `240`. |
| thumbLabels | readonly string[] | undefined | — | Per-thumb accessible names for multi-thumb (range) sliders. The label at each index is forwarded to the corresponding `<RadixSlider.Thumb>`. When omitted, every thumb falls back to `aria-label`/`aria-labelledby` (or the literal `'Value'` when neither is provided). |
| value | number | number[] | undefined | — | Controlled value. Accepts a scalar for single-thumb sliders or an array for multi-thumb (range) sliders. The shape passed in mirrors the shape passed back to `onValueChange`. |
| defaultValue | number | number[] | undefined | — | Uncontrolled initial value. Same scalar/array semantics as `value`. |
| onValueChange | ((next: number | number[]) => void) | undefined | — | Fires when the value changes. The argument shape mirrors the input shape: if `value`/`defaultValue` is a scalar, `next` is a scalar; if it's an array, `next` is an array. |