Slider

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/slider.json

Usage

Pass an array to get a range slider; thumbs are created per value.

import { Slider } from "@/components/ui/slider";

<Slider value={volume} onValueChange={setVolume} max={100} />
<Slider defaultValue={[100, 400]} min={0} max={500} step={10} />

Props

Accessibility

• Base UI Slider: thumbs are keyboard operable (Arrows step, PageUp/PageDown jump, Home/End to bounds) and expose aria-valuenow/min/max.
• For labeled sliders, wrap in a Field or pass aria-label per thumb via getAriaLabel.