shadcn.io is not affiliated with official shadcn/ui
Slider examples · Settings
Temperature Control Slider for React
A Temperature slider from 16°C to 30°C on a cool-to-hot gradient track, with the reading beside the label.
A thermostat-style control. The track fades from a cool color to a hot one, the reading sits beside the label, and the ends are written under the track. Use it for climate or heating settings.
Preview
Installation
FAQ
How is the gradient drawn?
On the track: the slider's class gives the part with data-slot="slider-track" a bg-linear-to-r from info to destructive, and makes the range transparent so the gradient shows.
How does the readout follow the thumb?
The value lives in state, starting at 22, and goes back to the slider as value. The reading beside the label prints it with °C.
onValueChange receives the new value, and the handler stores it as an array.
What range does it cover?
16 to 30 in steps of 1, and the labels under the track repeat those ends.
min and max set the ends.
Related
- Volume Control SliderA Volume slider with a speaker icon and
- Brightness Control SliderA Brightness slider with a sun icon, a
- Speed Control SliderA Speed slider with four steps, from Slow
- Basic Range SliderA two-thumb slider for picking a range
- Simple SliderA single-thumb slider with no label or
- Input with LabelA text input with a label above it