Skip to content

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

Free

Temperature Control Slider for React

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.

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 React, Base UI does not paint that gradient.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<div className="flex w-full max-w-md flex-col gap-2">
  <div className="flex items-center justify-between">
    <div className="flex items-center gap-2">
      <ThermometerIcon aria-hidden="true" className="size-4" />
      <Label>Temperature</Label>
    </div>
    <span className="text-muted-foreground text-sm tabular-nums">
      {value[0]}°C
    </span>
  </div>
  <Slider
    aria-label="Temperature"
    className="[&_[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 className="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 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.

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 Base UI it is onValueCommitted.

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