shadcn.io is not affiliated with official shadcn/ui
Slider examples · Vertical
Vertical with Labels Slider for React
A vertical Level slider with a 0 to 100 scale beside the track and the reading on the other side.
A scale beside the track, like a ruler. 100 to 0 run down one side, and the label and value sit on the other. Use it for mixers or meters.
Preview
Installation
FAQ
How is the scale placed?
A marks array mapped into a h-48 column with justify-between, the same height as the slider, so 100 is at the top and 0 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 number under the Level label prints it.
onValueChange receives the new value, and the handler stores it as an array.
How is the slider named?
The Level text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets.
On Base UI, aria-label is one string on the slider.
Related
- Volume Control Style SliderA vertical Volume slider with its label
- Vertical with Indicators SliderA vertical Intensity slider that snaps in
- Slider with Min/Max LabelsA Size slider with its minimum and
- Height Selector SliderA vertical Height slider from 100 to 250
- Slider with Step IndicatorsA Level slider that snaps in steps of 25
- Vertical Range SliderA vertical two-thumb slider with the