Feature: Fantastic Sliders and Where to Find Them (Audio, Backlight and Abstract Sliders)

[Syndelis]

About this PR

This PR:

1. Slightly refactors the pulseaudio module, moving all logic specific to dealing with pulseaudio into its own class, PulseaudioBackend;
2. Slightly refactors the backlight module, moving all logic specific to controlling brightness into its own class, BacklightBackend;
3. Introduces the Abstract Slider class ASlider;
4. Implements PulseaudioSlider, based on ASlider and PulseaudioBackend;
5. Implements BacklightSlider, based on ASlider and BacklightBackend;

Demo Video

waybar_slider.mp4

Configuration used in the video

Audio Config

"group/group-audio": {
    "orientation": "inherit",
    "drawer": {
        "transition-duration": 500,
        "children-class": "",
        "transition-left-to-right": false,
    },
    "modules": [
        "pulseaudio",
        "pulseaudio/slider",
    ]
},
"pulseaudio": {
    "scroll-step": 2,
    "format": "{icon}",
    "format-muted": "󰝟",
    "format-source": "",
    "format-source-muted": "",
    "format-icons": {
        "speaker": "󰕾",
        "hdmi": "󰓃",
        "headphone": "󰋋",
        "hands-free": "?",
        "headset": "󰋎",
        "phone": "",
        "portable": "",
        "car": "",
        "default": "󰕾"
    },
    "on-click-right": "pavucontrol",
    "on-click": "swayosd-client --output-volume=mute-toggle",
    "on-scroll-up": "swayosd-client --output-volume=raise",
    "on-scroll-down": "swayosd-client --output-volume=lower"
},
"pulseaudio/slider": {
    "orientation": "vertical"
}

Backlight Config

"group/group-backlight": {
    "orientation": "inherit",
    "drawer": {
        "transition-duration": 500,
        "children-class": "",
        "transition-left-to-right": false,
    },
    "modules": [
        "backlight",
        "backlight/slider",
    ]
},
"backlight": {
    "tooltip": false,
    "format": "{icon}",
    "format-icons": [
        "󰃞", "󰃟", "󰃠"
    ],
},
"backlight/slider": {
    "orientation": "vertical"
}

Style

#pulseaudio-slider, #pulseaudio-slider *, #group-audio,
#backlight-slider, #backlight-slider *, #group-backlight {
    margin: 0;
    padding: 0;
}

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

trough {
    min-height: 80px;
    min-width: 10px;
    border-radius: 5px;
    background-color: @mantle;
}

highlight {
    min-width: 10px;
    border-radius: 5px;
}

#pulseaudio-slider highlight {
    background-color: @macchiato-teal;
}

#backlight-slider highlight {
    background-color: @macchiato-red;
}

Future Work

A custom slider module, with overrideable behavior would be cool. Didn't get to work it still because I was pretty excited with the current results, and couldn't think of many more use cases for sliders at the moment.

[khaneliman]

You're a machine, this look awesome, too!

[Alexays]

LGTM, look awesome.
If you have time to also add this to the example config, these new features need to be visible to everyone.

And I had forgotten, but the drawer documentation should be added to the GitHub wiki.

Thanks again! 😍

[Syndelis]

LGTM, look awesome. If you have time to also add this to the example config, these new features need to be visible to everyone.

And I had forgotten, but the drawer documentation should be added to the GitHub wiki.

Thanks again! 😍

Both PRs are now properly documented in the Wiki! I appreciate both of your approvals, and thank you again for the fast merge!