shadcn.io is not affiliated with official shadcn/ui
Slider examples · Vertical
Vertical with Indicators Slider for React
A vertical Intensity slider that snaps in steps of 25, with Min to Max named beside the track.
Framework
UI library
Named levels on a vertical track. The slider snaps to five stops, and the column beside it names them from Max at the top to Min at the bottom. Use it for intensity or quality settings.
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 are the level names placed?
A levels array mapped into a h-52 column with justify-between, the same height as the slider, so Max sits at the top and Min at the bottom.
How does the readout follow the thumb?
The value lives in state, starting at 50, and goes back to the slider as value. The percentage under the label prints it.
onValueChange receives the new value, and the handler stores it as an array.
Related
- Vertical with Labels SliderA vertical Level slider with a 0 to 100
- Speed Control SliderA Speed slider with four steps, from Slow
- Volume Control Style SliderA vertical Volume slider with its label
- Slider with Step IndicatorsA Level slider that snaps in steps of 25
- Height Selector SliderA vertical Height slider from 100 to 250
- Vertical Range SliderA vertical two-thumb slider with the