shadcn.io is an independent project built on shadcn/ui
Percentage Range is on the left and 10% - 90% is on the right. The thumbs step by 5, and 0% and 100% sit under the ends.
Use it for a band of a total, such as a threshold. Named choices belong in a Radio Group. In Svelte, Ark UI snaps each thumb to that step.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-2"><div class="flex items-center justify-between"><Label>Percentage Range</Label><span class="text-muted-foreground text-sm tabular-nums">{value[0]}% - {value[1]}%</span></div><Slider aria-label={["Minimum percentage", "Maximum percentage"]} max={100} min={0} onValueChange={handleValueChange} step={5} value={value} /><div class="flex items-center justify-between text-muted-foreground text-xs"><span>0%</span><span>100%</span></div></div>FAQ
How does the readout follow the thumb?
The value lives in state, starting at [10, 90], and goes back to the slider as value. The text beside the label prints both values with % signs.
onValueChange receives details.value, the new array.
What are the labels under the track?
0% and 100% in a justify-between row, plain muted text that marks the ends.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label={["Minimum percentage", "Maximum percentage"]}, max={100}, min={0}, onValueChange={handleValueChange}, step={5} and value={value}. The rest is on the Slider page.
