Shadcn Slider
React slider for volume, price filters, and settings. Built with TypeScript and Tailwind CSS for Next.js using Base UI — one thumb or a range, keyboard steps included.
The shadcn slider is a track with a thumb you drag to pick a number. Use it for volume, price filters, and settings where the range is the point — not a box you type into. One value is a one-item array; a range is two.
Looking for a neobrutalism version for shadcn?
Same slider, thicker borders. The NeoBrutalism slider is the kit if you want that look.
Usage
import { Slider } from "@/components/ui/slider"<Slider defaultValue={[33]} max={100} step={1} />defaultValue is a number[]. One thumb is [33]. Two thumbs is a range.
Composition
Track, Range, and Thumb are not exported. Thumb count follows the length of value or defaultValue.
Range
Two values, two thumbs. The filled track is the span between them.
Multiple Thumbs
Three or more entries paint that many thumbs. Useful for low / mid / high cuts.
Vertical
orientation="vertical". Height comes from the parent — the root is h-full when vertical.
Controlled
value plus onValueChange. The label shows the live numbers.
Disabled
disabled greys the track and blocks the thumbs.
RTL
Wrap with DirectionProvider and dir="rtl". Left and right arrows flip with the direction.
API
Prop
Type
Keyboard
| Key | Action |
|---|---|
ArrowRight / ArrowLeft | Step. Flips with RTL and vertical |
ArrowUp / ArrowDown | Increase / decrease by step |
PageUp / PageDown | Larger step |
Shift + ArrowUp / ArrowDown | Larger step |
Home / End | Jump to min / max |
Notes
Value is always an array
Even one thumb is [50], not 50. Two thumbs is [25, 75]. The component paints a thumb per entry.
onValueChange fires while they drag. Use onValueCommit if the work should wait until they let go.
With other components
Name and live value
LabelCaption the control
InputType the exact number
FormSettings that submit
CardFrame a settings group
TooltipShow the current value
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Skeleton
React skeleton for loading placeholders on cards, tables, and forms. Built with TypeScript and Tailwind CSS for Next.js using Base UI — match the loaded layout.
Sonner
React toast for save confirms, undo, and async feedback. Built with TypeScript and Tailwind CSS for Next.js using Base UI — success, error, and promise states.