shadcn.io is an independent project built on shadcn/ui
Volume is on the left and 55% is on the right. The track is taller than usual and the thumb is larger.
Use it on a touch screen, where a thin thumb is hard to grab. Add a mute Button if silence should be one click. In Solid, Ark UI does not size the thumb.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-2">
<div class="flex items-center justify-between">
<Label>Volume</Label>
<span class="text-muted-foreground text-sm tabular-nums">
{value()[0]}%
</span>
</div>
<Slider aria-label={["Volume"]} class="[&_[data-slot=slider-thumb]]:size-6 [&_[data-slot=slider-track]]:h-3" onValueChange={handleValueChange} value={value()} />
</div>FAQ
How are the track and thumb enlarged?
The slider's class sets h-3 on the part with data-slot="slider-track" and size-6 on the part with data-slot="slider-thumb".
How does the readout follow the thumb?
The value lives in state, starting at 55, and goes back to the slider as value. The percentage beside the label prints it.
onValueChange receives details.value, the new array.
Does this work for a vertical slider?
The h-3 only thickens a horizontal track. A vertical one needs w-3 on the track instead.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label={["Volume"]}, onValueChange={handleValueChange} and value={value()}. The rest is on the Slider page.
