shadcn.io is an independent project built on shadcn/ui
UI library: Ark UI
One track and one thumb, and nothing else. It starts at 50, with no label and no readout on the page.
Use it in a row that already names the setting. Add a Label when the slider stands on its own. In Solid, Ark UI keeps this value inside the slider.
Installation
Anatomy
Usage
<div class="w-full max-w-md">
<Slider aria-label={["Value"]} defaultValue={[50]} />
</div>FAQ
Where does the value live?
Inside the slider. It starts at 50 from defaultValue, and nothing outside reads it. Make it controlled when something else needs the number.
How is it named without a label?
With aria-label set to Value, so screen readers still announce something. Use a word that says what it sets, such as Volume.
On Ark UI, aria-label is a list with one name per thumb.
API Reference
Slider
Sets aria-label={["Value"]} and defaultValue={[50]}. The rest is on the Slider page.
