shadcn.io is not affiliated with official shadcn/ui
Slider examples · Range
Basic Range Slider for React
A two-thumb slider for picking a range, starting at 25 and 75.
Framework
UI library
Two thumbs pick both ends of a range. Passing two numbers as the default draws two thumbs, and the filled stretch between them is the selection. Use it for price, age or time ranges where both ends are the user's choice.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
How does this demo get two thumbs?
The default value is [25, 75], two numbers, so the slider draws one thumb for each. The thumbs keep their order as they move.
Can the thumbs meet?
Yes. No minimum gap is set, so both thumbs can sit on the same value.
minStepsBetweenValues keeps them apart.
How are the thumbs named?
The Select Range text is a visible Label, and aria-label names the slider.
On Base UI, aria-label is one string, Range.
Related
- Price Range SliderA two-thumb price slider from $0 to $1000
- Range with Value Display SliderA two-thumb slider with the selected
- Simple SliderA single-thumb slider with no label or
- Range with Constraints SliderA two-thumb slider whose thumbs always
- Percentage Range SliderA two-thumb percentage slider that steps
- Input with LabelA text input with a label above it