shadcn.io is an independent project built on shadcn/ui
A Value label, a slider, and a number field all show 50. Dragging the thumb updates the field. Typing a number from 0 to 100 moves the thumb.
Use it when a rough drag and an exact number both matter. Drop the track and keep a Number Input if typing is the only path. In React, Base UI does not own the shared number.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-4">
<div className="flex flex-col gap-2">
<Label>Value</Label>
<Slider
aria-label="Value"
onValueChange={handleValueChange}
value={value}
/>
</div>
<Input
aria-label="Value"
className="w-20"
max={100}
min={0}
onChange={handleInputChange}
type="number"
value={value[0]}
/>
</div>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.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label="Value", onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.
Input
Sets aria-label="Value", max={100}, min={0}, onChange={handleInputChange}, type="number" and value={value[0]}. The rest is on the Input page.
