shadcn.io is not affiliated with official shadcn/ui
Slider examples · Interactive
Synced with Input Field Slider for React
A slider and a number field that share one value, so dragging updates the number and typing moves the thumb.
Drag for a rough value, type for an exact one. The slider and the number field read and write the same state. Use it where both speed and precision matter.
Preview
Installation
FAQ
How do the two stay in sync?
Both read one value from state. The slider writes it on every step, and the field writes it when what you type is a number from 0 to 100.
onValueChange receives the new value, and the handler stores it as an array.
What happens if I type 150?
Nothing changes. The field's handler ignores numbers outside 0 to 100, and the field shows the last valid value.
How is the number field set up?
An Input with type="number", min 0, max 100, w-20 and aria-label="Value".
How is the slider named?
The Value text above it is a visible Label, and the slider has aria-label Value.
On Base UI, aria-label is one string on the slider.
What range does it cover?
0 to 100. Keep the field's min and max in step with the slider.
min and max set the ends.
Should I use a Number Input instead?
For a stepper with buttons, yes: see Number Input. Here the plain field keeps the example small.
Related
- With Increment/Decrement Buttons SliderA Quantity slider between minus and plus
- With Preset Values SliderA Level slider with buttons under it that
- Input with LabelA text input with a label above it
- Simple SliderA single-thumb slider with no label or
- With Reset Button SliderAn Adjustment slider with a Reset button
- Required LabelA label with a destructive asterisk that