shadcn.io is an independent project built on shadcn/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 React, Ark UI keeps this value inside the slider.
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
Use email insteadNo credit card
Anatomy
Usage
<div className="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.
