Slider
An input where the user selects a value from within a given range. Built on Radix Slider.
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