Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Settings

Brightness Control Slider for React

A Brightness slider with a sun icon, a warning-colored fill and its percentage beside the label.

Framework
UI library

A settings slider that looks like what it controls. A sun icon sits before the Brightness label, the fill uses the theme's warning color, and the percentage updates as it moves. Use it in display or camera settings.

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 fill colored?

The slider's class sets bg-warning on the part with data-slot="slider-range" and border-warning on the thumb. It follows the theme, light or dark.

How does the readout follow the thumb?

The value lives in state, starting at 80, and goes back to the slider as value. The percentage beside the label prints it. onValueChange receives the new value, and the handler stores it as an array.

Is the sun icon announced?

No. It has aria-hidden="true"; the Brightness label and the slider's aria-label carry the meaning.

What range does it cover?

0 to 100, read as a percentage. 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.

When should I save the brightness?

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.

All 29 slider examples