shadcn.io is an independent project built on shadcn/ui
Level and 50 sit above the track. Under it, 0, 25, 50, 75, and 100 mark every stop. The thumb starts on 50.
Use it when values between the stops mean nothing. A Toggle Group is simpler if the track itself is unnecessary. In React, Base UI snaps the thumb to each stop.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-2">
<div className="flex items-center justify-between">
<Label>Level</Label>
<span className="text-muted-foreground text-sm tabular-nums">
{value[0]}
</span>
</div>
<Slider
aria-label="Level"
max={100}
min={0}
onValueChange={handleValueChange}
step={25}
value={value}
/>
<div className="flex items-center justify-between text-muted-foreground text-xs tabular-nums">
<span className="w-6 text-start">0</span>
<span className="w-6 text-center">25</span>
<span className="w-6 text-center">50</span>
<span className="w-6 text-center">75</span>
<span className="w-6 text-end">100</span>
</div>
</div>FAQ
How does it snap?
step is 25, so the thumb only lands on the five stops. The arrow keys move one stop at a time.
How are the stops labeled?
A flex justify-between row of five w-6 spans: the first aligned to the start, the middle three centered and the last to the end, so they sit under the stops.
How does the readout follow the thumb?
The value lives in state, starting at 50, and goes back to the slider as value. The number beside the Level label prints it.
onValueChange receives the new value, and the handler stores it as an array.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label="Level", max={100}, min={0}, onValueChange={handleValueChange}, step={25} and value={value}. The rest is on the Slider page.
