Forms
Slider
A value, or a range with two thumbs, along a track. Base UI Slider; values are arrays.
packages/design-system/components/ui/slider.tsx
Examples
Anatomy
- 01Track, 8px
- 02Range indicator, primary
- 03Thumb, 24 by 16, white
Usage
import { Slider } from "@repo/design-system/components/ui/slider";
<Slider value={[size]} onValueChange={(value) => setSize(value as number)} min={12} max={96} step={1} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | number[] | none | One number per thumb. With neither, it renders two thumbs at min and max. |
| onValueChange | (value, details) => void | none | Called while dragging. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Increment. |
| orientation | "horizontal" | "vertical" | "horizontal" | Vertical needs a height on the parent. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Show the current value next to it when the number matters.
Don't
- Use it for exact numbers. Use an input.