waybar-backlight-slider(5)

💡 waybar-backlight-slider — the backlight slider module, bestie edition

okay so this is waybar-backlight-slider(5) from the File Formats Manual, and it's literally the cutest little module. Let me put you on. 🫶

---

✨ NAME ✨

waybar — the backlight slider module. that's it, that's the vibe. 💅

---

🌸 DESCRIPTION 🌸

This module displays and controls the current brightness of the default device, or of whichever device you prefer. no cap. 🔆

Wanna change the brightness? two ways, both iconic:

• drag the slider all the way across the bar 💫
• click on a specific position on the bar and it snaps there 🎯

either way it's giving main character energy.

---

🎀 CONFIGURATION 🎀

k so here's every knob you can turn. don't skip any, they all matter fr fr.

• min — typeof: int, default: 0. this is the minimum volume value the slider should display and set. 🍓
• max — typeof: int, default: 100. this is the maximum volume value the slider should display and set. 🔥
• orientation — typeof: string, default: horizontal. the orientation of the slider. can be either horizontal or vertical. pick your angle, queen 👑
• device — typeof: string. the name of the preferred device to control. if you leave it empty, a device will be chosen automatically — the module just picks for you, so trusting ✨
• expand — typeof: bool, default: false. enables this module to consume all left over space dynamically. greedy little diva, we love her 💖

---

🌈 EXAMPLES 🌈

here's the whole setup, copy-paste ready, no notes:

"modules-right": [
    "backlight/slider",
],
"backlight/slider": {
    "min": 0,
    "max": 100,
    "orientation": "horizontal",
    "device": "intel_backlight"
}

look at that. gorgeous. 🌟

---

💜 STYLE 💜

the slider is a component with multiple CSS Nodes, and these are the ones exposed for you to style:

• #backlight-slider — controls the style of the box around the slider and bar. the outer fit, basically 🎁
• #backlight-slider slider — controls the style of the slider handle. that's the bit you drag, the main character herself 💅
• #backlight-slider trough — controls the style of the part of the bar that has not been filled. the empty stretch 🕳️
• #backlight-slider highlight — controls the style of the part of the bar that has been filled. the slay zone 🔥

✨ STYLE EXAMPLE ✨

steal this, it eats:

#backlight-slider slider {
    min-height: 0px;
    min-width: 0px;
    opacity: 0;
    background-image: none;
    border: none;
    box-shadow: none;
}

#backlight-slider trough {
    min-height: 80px;
    min-width: 10px;
    border-radius: 5px;
    background-color: black;
}

#backlight-slider highlight {
    min-width: 10px;
    border-radius: 5px;
    background-color: red;
}

black trough, red highlight, invisible slider handle — it's giving minimalism with a pop of drama. iconic. 🖤❤️

---

no warnings, no gotchas, no deprecated anything in here — this module is lowkey perfect. go forth and dim your screen responsibly bestie 😭🫶

---

and that's the whole page! this was waybar-backlight-slider(5) from the File Formats Manual, dated 2026-02-08. go build something pretty with it, ily, bye 💖✨🎀🦋