shadcn.io is not affiliated with official shadcn/ui
Slider examples · Interactive
With Reset Button Slider for React
An Adjustment slider with a Reset button that puts it back at 50.
Framework
UI library
A way back to the default after experimenting. The Reset button sits beside the value and sets the slider back to 50. Use it in image or audio adjustments.
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
What does Reset do?
It sets the value back to DEFAULT_VALUE, 50, the same constant the state starts from.
How does the readout follow the thumb?
The value lives in state, starting at 50, and goes back to the slider as value. The number next to Reset prints it.
onValueChange receives the new value, and the handler stores it as an array.
Should Reset be disabled at the default?
It is always enabled here. Disable it when the value already equals DEFAULT_VALUE if you want to show there's nothing to reset.
Related
- With Preset Values SliderA Level slider with buttons under it that
- Synced with Input Field SliderA slider and a number field that share
- Button with Text (Standard)The one filled action
- Simple SliderA single-thumb slider with no label or
- With Increment/Decrement Buttons SliderA Quantity slider between minus and plus
- Required LabelA label with a destructive asterisk that