shadcn.io is not affiliated with official shadcn/ui
Slider examples · Range
Range with Constraints Slider for React
A two-thumb slider whose thumbs always stay at least 10 apart.
Some ranges must never collapse. The two thumbs here keep a gap of at least 10, so the range is never shorter than that. Use it for booking windows or any span with a minimum length.
Preview
Installation
FAQ
How is the gap enforced?
MIN_GAP is 10, and the slider will not let the thumbs come closer than that.
It is passed as minStepsBetweenValues. With step 1, that is a gap of 10.
How does the readout follow the thumb?
The value lives in state, starting at [20, 60], and goes back to the slider as value. The two numbers beside the label print them.
onValueChange receives the new value, and the handler stores it as an array.
What is the text under the track?
Minimum gap: 10, printed from the same MIN_GAP, so the note and the rule never disagree.
Related
- Basic Range SliderA two-thumb slider for picking a range
- Price Range SliderA two-thumb price slider from $0 to $1000
- Range with Value Display SliderA two-thumb slider with the selected
- Percentage Range SliderA two-thumb percentage slider that steps
- Input with LabelA text input with a label above it
- Simple SliderA single-thumb slider with no label or