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 Svelte, Ark UI does not pick that color.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-2"><div class="flex items-center justify-between"><Label>Success Rate</Label><span class="text-muted-foreground text-sm tabular-nums">{value[0]}%</span></div><Slider aria-label={["Success Rate"]} class="[&_[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 details.value, the new 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.
