Shadcn Slider: React Range Sliders for Values and Intervals
The shadcn slider lets users drag a thumb along a track to choose a numeric value, or two thumbs to define an interval, making it the go-to react range slider for volume, price filters, opacity, and any bounded setting. It is built on the Radix UI slider primitive and styled entirely with Tailwind CSS, so track, range, and thumb all match your theme.
You will find 13 slider examples on this page ready to copy and paste, spanning single-value sliders, dual-thumb range sliders, vertical orientations, sliders with visible values and ticks, stepped increments, and disabled states. Every variant is a typed TypeScript component for Next.js and Vite projects.
When a slider is the right input
Sliders excel when the value is relative and the effect is immediate: volume, brightness, zoom, playback position, or a price range on a filter panel. Users care that the value is roughly right and can see or hear the result as they drag, so precision matters less than feel.
When exact numbers matter, such as entering a quantity or a precise budget, a numeric input is faster and less error-prone. A strong middle ground pairs both, letting the slider set the ballpark while the input accepts exact values.
Design guidelines
- Display the current value: Show the number near the thumb or beside the track so users are never guessing what they selected.
- Pick a sensible step: A price filter stepping by 10 feels responsive, while stepping by 1 across a range of thousands feels sluggish.
- Keep thumbs from crossing: In range sliders enforce a minimum gap between thumbs so the interval always stays valid.
- Size the hit area generously: The visual thumb can stay small, but the draggable target should comfortably exceed 24 pixels for touch.
- Label both ends: Anchoring the track with min and max values gives the position meaning at a glance.
What makes this slider solid
- Multi-thumb ranges: Passing an array of values renders multiple thumbs with the range highlighted between them, no extra library needed.
- Keyboard accessible: Arrow keys nudge by one step, PageUp and PageDown jump further, and Home and End hit the extremes.
- Vertical orientation: One prop flips the slider vertical for equalizers, mixers, and compact side panels.
- Touch friendly: Pointer capture keeps the drag active even when the finger drifts off the track mid-gesture.
Pairing with other components
Filter panels pair a range slider with checkbox groups and a select for sort order, with the interval echoed in text above the track. In settings screens, sliders line up inside a field with labels and helper text, often next to a switch that enables the feature being tuned.
For read-only progress values, use a progress bar instead of a disabled slider. The filter sidebars in our dashboard blocks show the price-range slider pattern in context.
Primitive support
The component wraps the Radix UI Slider primitive, which implements the drag mechanics, multi-thumb logic, RTL support, and the ARIA slider pattern with proper value announcements. The shadcn slider docs cover installation and props.
An equivalent exists as the Base UI Slider, including range support, so Base UI projects can reproduce every variant on this page with the same Tailwind CSS classes on a slightly different part structure.