shadcn.io is not affiliated with official shadcn/ui
Slider examples · Interactive
With Live Preview Slider for React
A Border Radius slider from 0 to 50px that rounds a preview box as it moves.
Framework
UI library
Showing the effect beats showing the number. The slider sets a border radius from 0 to 50px, and the box under it is redrawn with that radius as you drag. Use it in editors and design settings.
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 does the box change?
Its inline style sets borderRadius to the value in pixels. transition-all smooths the change.
How does the readout follow the thumb?
The value lives in state, starting at 50, and goes back to the slider as value. The text beside the label prints it with px.
onValueChange receives the new value, and the handler stores it as an array.
What is the preview box?
A div with h-24 and bg-muted-foreground, under the slider in the same column.
Related
- Synced with Input Field SliderA slider and a number field that share
- With Increment/Decrement Buttons SliderA Quantity slider between minus and plus
- Simple SliderA single-thumb slider with no label or
- With Reset Button SliderAn Adjustment slider with a Reset button
- With Preset Values SliderA Level slider with buttons under it that
- Required LabelA label with a destructive asterisk that