Slider
Continuous or stepped range input for numeric values. Supports single or multi-thumb selection.
Default
Single thumb, 0-100.
Usage
Import the parts you need from the component's folder.
import { Slider } from "@/components/ui/slider";Controlled
Bound to a ref with the value shown as text and a reset button.
Range
Two thumbs for selecting a range.
Two-thumb range
Two-thumb range from an array model value, with tooltips and a live output.
Stepped
Snap to discrete step values.
Wide thumb
Pill-shaped handle wider than it is tall, suited to open/close style controls.
Ruler scrubber
Recessed tick-ruler with a thin glowing indicator and a paired number input, matching design-tool property panels.
Simple
Basic slider with a label.
Disabled
Non-interactive, dimmed state.
Square thumb
Thumb with squared-off corners.
Solid thumb
Filled thumb over a faded track.
Tiny thumb
Slim bar-style thumb.
Reference labels
Static reference labels beneath the track.
Ticks
Tick marks with skipped value labels.
With output
Live value shown beside the label.
With labels
Descriptive labels above the track.
Labels and tooltip
Labels plus a value tooltip on the thumb.
Dual range
Two thumbs selecting a min and max.
Dual range with output
Range with a live min-max output.
Volume
Volume control flanked by icons.
Multiple thumbs
Three thumbs with formatted tooltips.
Temperature
Slider synced with an input and a reset action.
With input
Slider synced with a number input.
Rating with emoji
1-5 rating flanked by emoji.
Rating with tooltip
Rating with a label tooltip and reactive emoji.
Dual range with input
Range bounded by two inputs.
Plus / minus buttons
Stepper buttons alongside the slider.
Price range
Formatted price range with an action button.
Vertical
Vertical orientation.
Vertical with input
Vertical slider synced with an input.
Vertical dual range and tooltip
Vertical range with value tooltips.
Object position
Multiple labelled sliders with a reset-all action.
Price with histogram
Range slider over a price-distribution histogram.
Equalizer
Five vertical bands with pill thumbs and tooltips.
API Reference
Slider
Accessibility
Keyboard shortcuts and ARIA behavior.
- Each thumb has role=slider with aria-valuemin, aria-valuemax, and aria-valuenow.
- Provide an accessible label so screen readers announce the slider's purpose.