shadcn.io is an independent project built on shadcn/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 React, Base UI does not draw the sun.
Installation
Anatomy
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">
<SunIcon aria-hidden="true" className="size-4" />
<Label>Brightness</Label>
</div>
<span className="text-muted-foreground text-sm tabular-nums">
{value[0]}%
</span>
</div>
<Slider
aria-label="Brightness"
className="[&_[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 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.
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.
