Minimal: You will need the following HACS addons in order to setup the card.
https://github.com/custom-cards/button-card
https://github.com/custom-cards/stack-in-card
https://github.com/thomasloven/lovelace-card-mod
https://github.com/thomasloven/lovelace-layout-card
https://github.com/AnthonMS/my-cards/blob/main/docs/cards/slider-v2
Optional:
https://github.com/thomasloven/hass-browser_mod
https://github.com/thomasloven/lovelace-popup-card (deprecated). But needed in order to remove white border around card if using it as a pop up.
--mdc-theme-surface: transparent;
This is why the deprecated pop up card is needed. I haven't found another way to apply the CSS directly by using the intended way of opening a pop up using the code below from Browser Mod docs.
action: fire-dom-event
browser_mod:
command: popup
title: My title
card:
type: ...etc...
Furthermore the card is styled to fit my phones dimensions. Another user will likely have to make adjustments in order to fit their needs. It's probable that adjustments have to be made to the margin and width of the custom volume slider of the card.
I've used scripts for my buttons to do specific things suited for my set up but other users could simply call a service or use it to toggle an entity. Have fun.