Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Slider - Brightness Control
A brightness control slider with sun icon and custom yellow styling for the track and thumb to match brightness theme
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Brightness needs color—yellow feels like light! This React brightness slider uses custom className targeting data-slot attributes for yellow track and thumb. Built with shadcn/ui Slider and Lucide SunIcon, the themed styling reinforces brightness metaphor—perfect for display settings, monitor controls, smart home lighting, photo editors, or any brightness adjustment where color-coded controls improve recognition and create cohesive visual language.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Volume Control
Volume slider with speaker icon
Temperature Control
Temperature slider with gradient track
Speed Control
Speed slider with discrete labels
Standard Slider
Basic slider without customization
Slider with Value
Slider with inline value display
Theme Toggle
Theme switching component