Components
Slider
Number or range input on Base UI Slider; hairline track, heavy ink range, square thumb.
Preview
Drag, or use the arrow keys.
Install
bash
npx shadcn add @eloquent/sliderUsage
tsx
import { Slider } from "@/components/ui/slider";
<Slider defaultValue={[40]} thumbLabels={["Text size"]} />
<Slider defaultValue={[20, 70]} thumbLabels={["Smallest size", "Largest size"]} />The number of values sets the number of thumbs. Give every thumb a name through thumbLabels.
States
| State | Treatment |
|---|---|
| Default | 1px ink hairline track, 3px ink range, square paper thumb with a 1px ink border |
| Pressed | The thumb fills ink while dragging |
| Focus | 2px ink outline, 2px offset around the thumb |
| Disabled | Halftone track, range and thumb border, cursor-not-allowed |
Keyboard
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move focus between thumbs (disabled sliders are skipped) |
| Arrow Right / Up | Increase by one step |
| Arrow Left / Down | Decrease by one step |
| Page Up / Page Down | Change by the large step |
| Home / End | Jump to the minimum / maximum |
Vietnamese
Kéo thanh trượt, hoặc dùng phím mũi tên.
Ink adaptation
Upstream shadcn's rounded track and thumb, shadow, ring glow and primary-colour range are removed. The range is a heavier rule on a hairline track. The control band is 44px high so the whole band is a pointer target. There is no hover treatment and no transition, so nothing animates under prefers-reduced-motion. Built on Base UI Slider.