Really dumb guy needs help with a large vertical slider acting as a volume control

Configuration Frontend
1

Hi all,

My head is currently spinning a bit.

My wife and I built a house last year.

She wants the ability to distribute the music that is playing on the TV to the bedroom and utility room.

To that end, I’ve got 2 Yamaha TSR-700 AVR’s.

One drives all 7:2 speakers in the living room, and the other is split into two zones, one for the utility room, and one for the dining room.

I can control all this via the MusicCast thing on my phone.

Trouble is, my wife is definitely not a phone person, so I’ve got two tablets (thus far) one in the living room, one in the bedroom that I want her to be able to control the audio from.

So, I want to build a Dashboard for those tablets. I’ve got the YNCA add-on installed, and I can control the various volume levels via that.

This is going to be simple and look something like this:

image
image1297×733 20.9 KB

I’ve looked around at the various examples using a plethora of different cards, and I’m no farther now than when I started.

Can someone suggest a manner to create the slider mechanism? Once there, I’ll see if I can create the remainder on my own.

Thank you in advance.

chris

2

I’d suggest the custom:slider-button-card

image
image950×614 27.5 KB

This is a custom card and will require HACs to be installed. Feel free to reach out if you have additional questions

type: grid
cards:
  - type: custom:slider-button-card
    entity: light.pc_lights
    slider:
      direction: bottom-top
      background: gradient
      use_state_color: true
      toggle_on_click: true
    icon:
      show: false
      use_state_color: false
    action_button:
      mode: custom
      show: true
      tap_action:
        action: toggle
      show_spinner: true
    card_mod:
      style: |
        .action {
          color: red !important;
          position: absolute;
          left: -45px;
          }
  - type: custom:slider-button-card
    entity: light.corner_stand
    slider:
      direction: bottom-top
      background: gradient
      use_state_color: true
      toggle_on_click: true
    icon:
      show: false
    action_button:
      mode: custom
      show: true
      tap_action:
        action: toggle
    card_mod:
      style: |
        .action {
          color: blue!important;
          position: absolute;
          left: -45px;
          }
  
  
  - type: custom:slider-button-card
    entity: light.bed_lights
    slider:
      direction: bottom-top
      background: gradient
      use_state_color: true
    action_button:
      mode: custom
      show: true
      tap_action:
        action: toggle
    icon:
      show: false
      use_state_color: false
    card_mod:
      style: |
        .action {
          color: green !important;
          position: absolute;
          left: -45px;
          }
         ha-card {
          height: 300px !important;
3

Hi Christopher, chiming in with another approach.

Since the place here is also equipped with multi-room audio and music is on almost all the time, unless TV is on which is not that much, I searched for an easy option to control the volume/playback.

I didn’t want to use any touchscreen as the primary way to control the music but something of which a first push would change the volume instead of waking up a device, going to the right screen/app, …

With a dedicated touch device, you can streamline this process, but still this is not what I think makes things smooth enough to my understanding.

I bought IKEA remotes for this purpose which are dedicated to the rooms where music should be controlled.
Because of the multiple buttons, aside from volume, playback can be controlled as well.
On top of that, in the livingroom, by using conditions (music or TV playing) the same button can be used to also control the volume, playback (pausing, mute/unmute) of the TV can be controlled which is much more intuitive then using the TV remote for this.

Aside from this, volume/playback is also controlled by automations.

For you original question, another option: GitHub - wrodie/mixer-card: Mixer card for Home Assistant

1 Like
4

Thanks.

Got Slider-Button_Card installed via HACS. Restarted HA

This is what I’m getting?

image
image1029×489 42.6 KB

Any idea why?

5

Try clearing you browser cache to start

6

That worked.

Thanks

I’ve got solutions for both slider cards working.

7

Good you got it solved!

Please take the time to mark the solution as the answer, you do that by selecting the three dots under the post:

image

Then select the check box:

image
By doing so:

  • this thread can be useful to other users as well (this thread comes up as solution when starting a thread which is similar to yours).
  • this prevents that someone else steps in trying to help

Thanks for giving back to the community! :+1: