shadcn.io is not affiliated with official shadcn/ui
Slider examples · Standard
Simple Slider for React
A single-thumb slider with no label or readout, starting at 50.
Framework
UI library
The plainest slider: a track and one thumb, with nothing around it. It starts at 50 and keeps its own value. Use it where the context already says what it sets, such as a row in a settings list.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
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 Base UI, aria-label is one string on the slider.
Related
- Slider with LabelA slider with a Volume label above the
- Slider with Value DisplayA Quality slider with its percentage
- Slider with Min/Max LabelsA Size slider with its minimum and
- Basic Range SliderA two-thumb slider for picking a range
- Volume Control SliderA Volume slider with a speaker icon and
- Input with LabelA text input with a label above it