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 Vue, Ark UI moves this thumb with the up and down keys.
Installation
Anatomy
Usage
<div class="flex flex-col items-center gap-4">
<Label>Height (cm)</Label>
<div class="h-64">
<Slider
:aria-label='["Height"]'
:max="250"
:min="100"
@value-change="handleValueChange"
orientation="vertical"
:value="value"
/>
</div>
<span class="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.
The Vue file binds :value and listens to @value-change, which receives details.value.
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", value-change="handleValueChange", orientation="vertical" and value="value". The rest is on the Slider page.
