shadcn.io is not affiliated with official shadcn/ui
Slider examples · Standard
Slider with Value Display for React
A Quality slider with its percentage shown beside the label as it moves.
People see the exact number while they drag. The Quality label and the percentage share a row above the track, and the percentage updates with every step. Use it when the number matters as much as the position.
Preview
Installation
FAQ
How does the readout follow the thumb?
The value lives in state, starting at 65, and goes back to the slider as value. The percentage beside the label prints the first value with a % sign.
onValueChange receives the new value, and the handler stores it as an array.
How are the label and number placed?
In a flex items-center justify-between row above the slider. The number is muted and uses tabular-nums, so it keeps its width as digits change.
How is the slider named?
The Quality text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets.
On Base UI, aria-label is one string on the slider.
What scale is the percentage on?
0 to 100 in steps of 1, so the value is already a percentage.
min and max set the ends.
Related
- Slider with LabelA slider with a Volume label above the
- Simple SliderA single-thumb slider with no label or
- Volume Control SliderA Volume slider with a speaker icon and
- Range with Value Display SliderA two-thumb slider with the selected
- Slider with Min/Max LabelsA Size slider with its minimum and
- Input with LabelA text input with a label above it