Skip to content

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

Free

Brightness Control Slider for Solid

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

UI library: Ark UI

A sun icon, the word Brightness, and 80% share the row above the track. The filled range uses the warning color.

Use it in display or camera settings. A Switch is enough when the screen is only on or off. In Solid, Ark UI does not draw the sun.

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">
          <SunIcon aria-hidden="true" class="size-4" />
          <Label>Brightness</Label>
        </div>
        <span class="text-muted-foreground text-sm tabular-nums">
          {value()[0]}%
        </span>
      </div>
      <Slider aria-label={["Brightness"]} class="[&_[data-slot=slider-range]]:bg-warning [&_[data-slot=slider-thumb]]:border-warning" onValueChange={handleValueChange} value={value()} />
    </div>

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 details.value, the new 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 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={["Brightness"]}, onValueChange={handleValueChange} and value={value()}. The rest is on the Slider page.

All 29 slider examples