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 React, Base UI does not size the thumb.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-2">
<div className="flex items-center justify-between">
<Label>Volume</Label>
<span className="text-muted-foreground text-sm tabular-nums">
{value[0]}%
</span>
</div>
<Slider
aria-label="Volume"
className="[&_[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 the new value, and the handler stores it as an 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.
