shadcn.io is an independent project built on shadcn/ui
A thermometer icon, Temperature, and 22°C sit above the track. It fades from a cool color to a hot one, with 16°C and 30°C under the ends.
Use it for a thermostat or another climate setting. A Number Input fits when people type a setpoint. In Svelte, Ark UI does not paint that gradient.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-2"><div class="flex items-center justify-between"><div class="flex items-center gap-2"><ThermometerIcon aria-hidden="true" class="size-4" /><Label>Temperature</Label></div><span class="text-muted-foreground text-sm tabular-nums">{value[0]}°C</span></div><Slider aria-label={["Temperature"]} class="[&_[data-slot=slider-range]]:bg-transparent [&_[data-slot=slider-track]]:bg-linear-to-r [&_[data-slot=slider-track]]:from-info [&_[data-slot=slider-track]]:to-destructive rtl:[&_[data-slot=slider-track]]:bg-linear-to-l" max={30} min={16} onValueChange={handleValueChange} value={value} /><div class="flex items-center justify-between text-muted-foreground text-xs"><span>16°C</span><span>30°C</span></div></div>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 details.value, the new 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.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label={["Temperature"]}, max={30}, min={16}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.
