shadcn.io is not affiliated with official shadcn/ui
Slider examples · Styled
Colored Slider for React
A Success Rate slider whose fill and thumb border use the success color.
Color can say what a value means. The fill and the thumb's border use the theme's success color, and the percentage sits beside the label. Use it where the color carries a status.
Preview
Installation
FAQ
How is it colored?
The slider's class sets bg-success on the part with data-slot="slider-range" and border-success on the part with data-slot="slider-thumb". Both follow the theme.
How does the readout follow the thumb?
The value lives in state, starting at 60, and goes back to the slider as value. The percentage beside the label prints it.
onValueChange receives the new value, and the handler stores it as an array.
How do I use another color?
Swap the tokens, such as bg-destructive or bg-warning. Keep to theme tokens so dark mode still works.
Related
- With Tooltip SliderA Progress slider with a bubble above the
- Large/Thick SliderA Volume slider with a thicker track and
- Simple SliderA single-thumb slider with no label or
- Success ProgressA progress bar at 70 percent in the
- Synced with Input Field SliderA slider and a number field that share
- Badge with Text (Standard)A default badge with a short label for a