Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Styled

With Gradient Track Slider for React

A Heat slider on a track that fades from a cool color to a hot one.

Framework
UI library

The track itself shows the scale. It fades from the theme's info color to its destructive color, and the range is transparent so the gradient shows end to end. Use it for heat, intensity or any cold-to-hot scale.

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

FAQ

How is the gradient drawn?

The slider's class gives the part with data-slot="slider-track" bg-linear-to-r from info to destructive, and the range bg-transparent.

How does the readout follow the thumb?

The value lives in state, starting at 70, and goes back to the slider as value. The number beside the label prints it with a degree sign. onValueChange receives the new value, and the handler stores it as an array.

Can I change the colors?

Change the from- and to- classes. Theme tokens keep it working in dark mode.

How is the slider named?

The Heat text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets. On Base UI, aria-label is one string on the slider.

What range does it cover?

0 to 100. min and max set the ends.

Can I move it from the keyboard?

Yes. The thumb takes focus with Tab. The arrow keys move it by one step, Page Up and Page Down by a larger step, and Home and End jump to the ends.

All 29 slider examples