shadcn.io is not affiliated with official shadcn/ui
Slider examples · Vertical
Height Selector Slider for React
A vertical Height slider from 100 to 250 cm with the reading under it.
Framework
UI library
Height reads naturally top to bottom. The vertical slider runs from 100 to 250 cm, with the label above and the reading below. Use it for body measurements or any vertical quantity.
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 is it made vertical?
orientation="vertical", inside a h-64 box. The slider fills that box, so the box sets its length.
How does the readout follow the thumb?
The value lives in state, starting at 170, and goes back to the slider as value. The reading under it prints it with cm.
onValueChange receives the new value, and the handler stores it as an array.
Which keys move it?
Up and Right raise the value, Down and Left lower it, and Home and End jump to 100 and 250.
Related
- Volume Control Style SliderA vertical Volume slider with its label
- Vertical with Labels SliderA vertical Level slider with a 0 to 100
- Temperature Control SliderA Temperature slider from 16°C to 30°C on
- Vertical Range SliderA vertical two-thumb slider with the
- Slider with Min/Max LabelsA Size slider with its minimum and
- Input with LabelA text input with a label above it