shadcn.io is an independent project built on shadcn/ui
Height (cm) sits above a vertical track, and 170 cm sits under it. The scale runs from 100 to 250.
Use it for a measurement people picture from top to bottom. A Number Input is better when they already know the height. In React, Base UI moves this thumb with the up and down keys.
Installation
Anatomy
Usage
<div className="flex flex-col items-center gap-4">
<Label>Height (cm)</Label>
<div className="h-64">
<Slider
aria-label="Height"
max={250}
min={100}
onValueChange={handleValueChange}
orientation="vertical"
value={value}
/>
</div>
<span className="text-muted-foreground text-sm tabular-nums">
{value[0]} cm
</span>
</div>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.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label="Height", max={250}, min={100}, onValueChange={handleValueChange}, orientation="vertical" and value={value}. The rest is on the Slider page.
