Components
Slider
Pick a number, or a range, by clicking, dragging or using the keyboard.
Loading...
Installation
npx shadcn@latest add @fujin/sliderUsage
import { Slider } from "@/components/ui/slider"<Slider defaultValue={40} aria-label="Volume" />One thumb is rendered per value: a number gives one thumb, an array gives one thumb per entry.
<Slider
defaultValue={[200, 600]}
max={1000}
step={10}
getAriaLabel={(index) => (index === 0 ? "Minimum price" : "Maximum price")}
/>Labelling each thumb
Every thumb is a native range input and needs its own accessible name.
| Situation | Do this |
|---|---|
One thumb inside a Field | Nothing - FieldLabel names it. |
| One thumb, no visible label | aria-label="Volume" (forwarded to the thumb). |
| Range (two or more thumbs) | getAriaLabel={(i) => ...} so the thumbs differ. |
| Announced value needs units | format={...} or getAriaValueText. |
Not drag-only
Clicking anywhere on the track moves the nearest thumb there, and every thumb
responds to Arrow keys, Page Up/Down (largeStep) and Home/End. Dragging is
never the only way to set a value (WCAG 2.5.7).
What's different from shadcn/ui
defaultValue={40}works; shadcn requires[40]. With an array,onValueChangereports an array.getAriaLabel/aria-labelgo to the thumbs, where screen readers need them. shadcn putsaria-labelon the rootdiv, which names nothing.- The thumb is 16px but has a 24px hit area, the control strip is 24px tall, and the focus ring is solid.
- The range part is
data-slot="slider-range", like shadcn; style dragging withdata-[dragging]:.
API Reference
Prop
Type
Every other prop is forwarded to the Base UI Slider root.