shadcn.io is not affiliated with official shadcn/ui
Input examples · Special
Range Slider with Value Input for React
A range input with its current value shown beside the label.
A bare range input hides its value. This example puts the live percentage next to the Volume label and the 0% and 100% bounds under the track, so people see exactly where they've set it. The value lives in state and updates as the thumb moves. Use it for volume, opacity, progress and other quick percentage settings.
Preview
Installation
FAQ
What kind of field is this?
An Input with type range, min 0 and max 100. The browser draws the track and the thumb; the arrow keys move it by one.
How does the percentage follow the thumb?
The value lives in state, starts at 50, and is written back on every change, so the number beside the label updates as the thumb moves.
Why convert the value to a number?
An input's value is always a string, even for a range. Converting it keeps the state a number, ready for math or for an API that expects one.
What are the labels under the track?
A row with justify-between that shows 0% and 100% in text-xs and text-muted-foreground. They are plain text; min and max set the real bounds.
When should I use the Slider component instead?
When you need a styled track, two thumbs for a range, marks or vertical orientation. Slider does all of that; a range input is the lightest option for a single value.
Related
- Input with LabelA text input with a label above it
- Currency InputAn amount field with a dollar sign inside
- Disabled InputA disabled field showing an account ID
- Settings FormAn app settings form with language and
- Search Filter FormA product search form with a query, a
- Simple SliderA single-thumb slider with no label or