Slider
An input where the user picks a numeric value (or range) by dragging within a bounded range. Reach for it when the exact number matters less than its position between a known min and max — volume, opacity, zoom, price filters — and you want fast, approximate adjustment. Use a number Input instead when the user knows the precise value to type, and a RadioGroup or Select for a short list of discrete, unordered choices. Pass two values to value for a two-thumb range (e.g. a min/max filter). The track is monotone with a single fixed style — there are no tone or size variants; pair it with a visible label or value readout for precision.
Default
<Slider defaultValue={[50]} max={100} step={1} />Range (two thumbs)
[25, 75]
const [value, setValue] = React.useState<number[]>([25, 75]);
return <Slider value={value} onValueChange={setValue} max={100} step={1} />;Disabled
<Slider defaultValue={[40]} max={100} step={1} disabled />Props
| Prop | Type / note |
|---|---|
| value | number[] — controlled. One entry per thumb. |
| defaultValue | number[] — uncontrolled initial value. One entry per thumb. |
| onValueChange | (value: number[]) => void |
| onValueCommit | (value: number[]) => void — fires after drag/keyboard commit |
| min | number (default 0) |
| max | number (default 100) |
| step | number (default 1) |
| minStepsBetweenThumbs | number — range-mode gap enforcement |
| orientation | "horizontal" | "vertical" |
| disabled | boolean |
| inverted | boolean — flips visual direction |
| name / form | Form integration (via Radix) |
Source
packages/react/src/components/slider.tsx · Figma node 2819:30565