shadcn.io is not affiliated with official shadcn/ui
Slider examples · Range
Percentage Range Slider for React
A two-thumb percentage slider that steps by 5, with the range beside the label and 0% and 100% under the ends.
Framework
UI library
A range in percent, moving in steps of 5. The selected range sits beside the label, and the ends of the scale sit under the track. Use it for thresholds or a share of a total.
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 the readout follow the thumb?
The value lives in state, starting at [10, 90], and goes back to the slider as value. The text beside the label prints both values with % signs.
onValueChange receives the new value, and the handler stores it as an array.
What are the labels under the track?
0% and 100% in a justify-between row, plain muted text that marks the ends.
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
- Range with Constraints SliderA two-thumb slider whose thumbs always
- Slider with Value DisplayA Quality slider with its percentage
- Synced with Input Field SliderA slider and a number field that share