shadcn.io is an independent project built on shadcn/ui
Intensity and 50 sit to the left of a vertical track. Max, High, Med, Low, and Min run down the other side.
Use it for a quality setting with a few named stops. A Toggle Group is clearer if only those five values exist. In Svelte, Ark UI snaps the thumb and ignores the names.
Installation
Anatomy
Usage
<div class="flex items-center gap-4"><div class="flex flex-col gap-2"><Label>Intensity</Label><span class="text-muted-foreground text-sm tabular-nums">{value[0]}%</span></div><div class="h-52"><Slider aria-label={["Intensity"]} onValueChange={handleValueChange} orientation="vertical" step={25} value={value} /></div><div class="flex h-52 flex-col items-start justify-between text-muted-foreground text-xs">{#each levels as level (level)}<span>{level}</span>{/each}</div></div>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 details.value, the new array.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label={["Intensity"]}, onValueChange={handleValueChange}, orientation="vertical", step={25} and value={value}. The rest is on the Slider page.
