Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Temperature Control Slider for Solid

A Temperature slider from 16°C to 30°C, starting at 22°C, on a track that fades from a cool color to a hot one.

UI library: Ark 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 Solid, Ark UI does not paint that gradient.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Slider anatomy: root, label, value, track, range, thumb

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.

Is the thermometer icon announced?

No. It has aria-hidden="true"; the label and the slider's aria-label say Temperature.

Can it move in half degrees?

Set step to 0.5. The demo uses whole degrees.

When should I save the temperature?

The change callback runs on every step while the thumb moves. Save or fetch from the end-of-change callback, which runs once when dragging stops. On Ark UI it is onValueChangeEnd.

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.

All 29 slider examples