shadcn.io is not affiliated with official shadcn/ui
Slider examples · Settings
Speed Control Slider for React
A Speed slider with four steps, from Slow to Very Fast, named beside the label and under the track.
Framework
UI library
Some settings have names, not numbers. The slider runs from 0 to 3, and each step maps to Slow, Normal, Fast or Very Fast. Use it for playback or animation speed.
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
How do the steps get names?
A speedLabels array holds the four names. The text beside the label prints the name at the current value, and the row under the track lists all four.
How does the readout follow the thumb?
The value lives in state, starting at 1 (Normal), and goes back to the slider as value. The name beside the label looks it up in speedLabels.
onValueChange receives the new value, and the handler stores it as an array.
Related
- Volume Control SliderA Volume slider with a speaker icon and
- Brightness Control SliderA Brightness slider with a sun icon, a
- Temperature Control SliderA Temperature slider from 16°C to 30°C on
- Percentage Range SliderA two-thumb percentage slider that steps
- Slider with Value DisplayA Quality slider with its percentage
- Synced with Input Field SliderA slider and a number field that share