shadcn.io is an independent project built on shadcn/ui
Success Rate is on the left and 60% is on the right. The filled part of the track and the thumb border use the success color.
Use it when the color carries a status, such as a rate that looks healthy. A Progress bar is enough when nobody drags the value. In React, Base UI does not pick that color.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-2">
<div className="flex items-center justify-between">
<Label>Success Rate</Label>
<span className="text-muted-foreground text-sm tabular-nums">
{value[0]}%
</span>
</div>
<Slider
aria-label="Success Rate"
className="[&_[data-slot=slider-range]]:bg-success [&_[data-slot=slider-thumb]]:border-success"
onValueChange={handleValueChange}
value={value}
/>
</div>FAQ
How is it colored?
The slider's class sets bg-success on the part with data-slot="slider-range" and border-success on the part with data-slot="slider-thumb". Both follow the theme.
How does the readout follow the thumb?
The value lives in state, starting at 60, 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.
How do I use another color?
Swap the tokens, such as bg-destructive or bg-warning. Keep to theme tokens so dark mode still works.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label="Success Rate", onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.
