Slider
Two variants: compact (spring-snapped thumb with track fill and range mode) and comfortable (pip-based discrete selector for settings panels).
Installation
Installs the Radix flavor. Switch in the right panel.
Compact
Inspect
25
Range
Inspect
25—75
Steps
Inspect
50
50
Value Display
Inspect
Volume: 40
Format
Inspect
Opacity: 75%
Disabled
Inspect
50
Comfortable
Inspect
Roundness2
Comfortable — Scrubber
Inspect
Volume50%
Comfortable — Format
Inspect
QualityMedium
Comfortable — Disabled
Inspect
Roundness2
API Reference
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | [number, number] | — | Current value. Pass an array to enable range mode with two thumbs. |
| onChange | (value: SliderValue) => void | — | Called when the value changes via drag, click, or keyboard. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Step increment. Thumb snaps to the nearest step during drag. |
| showSteps | boolean | false | Render dot indicators at each step position on the track. |
| showValue | boolean | true | Whether to display the current value label. |
| valuePosition | "left" | "right" | "top" | "bottom" | "tooltip" | "left" | Position of the value label. "tooltip" shows above the thumb during interaction. |
| formatValue | (v: number) => string | String | Custom formatter for the value label. |
| label | string | — | Accessible label for the slider, also shown as prefix in the value display. |
| disabled | boolean | false | Disables all interaction. |
SliderComfortable
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current selected value. |
| onChange | (value: number) => void | — | Called when the value changes via click, drag, or keyboard. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| variant | "pips" | "scrubber" | "pips" | Visual mode. "pips" shows discrete dot indicators. "scrubber" shows no dots — drag anywhere in the row to set a continuous value. |
| step | number | 1 | Step increment for snapping. In pips mode, also determines the number of dots rendered. |
| label | string | — | Label shown on the left side. Transitions from muted to foreground on hover. |
| formatValue | (v: number) => string | String | Custom formatter for the value shown on the right. |
| disabled | boolean | false | Disables all interaction. |