Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Slider - Temperature Control
A temperature control slider with gradient track from blue to red and celsius display for thermostat-style controls
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Temperature is a spectrum—blue cold, red hot! This React temperature slider uses gradient track from blue-400 to red-400 with transparent range fill. Built with shadcn/ui Slider and celsius formatting, the visual gradient maps to temperature—perfect for smart thermostats, climate controls, heating systems, weather apps, or any temperature setting where color-coded feedback makes hot and cold intuitive at a glance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Volume Control
Volume slider with percentage display
Brightness Control
Brightness slider with yellow styling
Speed Control
Speed slider with discrete labels
Basic Range Slider
Range slider for temperature ranges
Standard Slider
Basic slider without gradient
Input
Standard input component