shadcn.io is an independent project built on shadcn/ui
Quality is on the left and 65% is on the right, above a single track. The percentage is the only readout.
Use it when the exact number matters as much as where the thumb sits. A Number Input helps if people need one specific value. In React, Base UI does not format the percent.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-2">
<div className="flex items-center justify-between">
<Label>Quality</Label>
<span className="text-muted-foreground text-sm tabular-nums">
{value[0]}%
</span>
</div>
<Slider
aria-label="Quality"
onValueChange={handleValueChange}
value={value}
/>
</div>FAQ
How does the readout follow the thumb?
The value lives in state, starting at 65, and goes back to the slider as value. The percentage beside the label prints the first value with a % sign.
onValueChange receives the new value, and the handler stores it as an array.
How are the label and number placed?
In a flex items-center justify-between row above the slider. The number is muted and uses tabular-nums, so it keeps its width as digits change.
How is the slider named?
The Quality text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets.
On Base UI, aria-label is one string on the slider.
What scale is the percentage on?
0 to 100 in steps of 1, so the value is already a percentage.
min and max set the ends.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label="Quality", onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.
