Shadcn.io is not affiliated with official shadcn/ui
Brightness Control
A brightness control slider with sun icon and custom yellow styling for the track and thumb to match brightness theme
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.
Brightness Control preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.