shadcn.io is not affiliated with official shadcn/ui
Slider examples · Standard
Slider with Step Indicators for React
A Level slider that snaps in steps of 25, with every step labeled under the track.
When only a few values are allowed, show them. The slider snaps to 0, 25, 50, 75 and 100, and each stop is labeled under the track. Use it for levels or presets where in-between values mean nothing.
Preview
Installation
FAQ
How does it snap?
step is 25, so the thumb only lands on the five stops. The arrow keys move one stop at a time.
How are the stops labeled?
A flex justify-between row of five w-6 spans: the first aligned to the start, the middle three centered and the last to the end, so they sit under the stops.
How does the readout follow the thumb?
The value lives in state, starting at 50, and goes back to the slider as value. The number beside the Level label prints it.
onValueChange receives the new value, and the handler stores it as an array.
Related
- Slider with Min/Max LabelsA Size slider with its minimum and
- Slider with Value DisplayA Quality slider with its percentage
- Speed Control SliderA Speed slider with four steps, from Slow
- Percentage Range SliderA two-thumb percentage slider that steps
- Slider with LabelA slider with a Volume label above the
- Simple SliderA single-thumb slider with no label or