Wanted : Big Lovelace volume slider

Hello all

I use - and fancy, the mini-media-player (Thanks and respect to @kalkih) !

Only problem is, that I have only approx 1/8 og a tablet screen reserved for the media player card, which is fine for showing artwork, chosing track, join/unjoin etc.

The volume control slider however is way too smal for my clumsy fingers, to control my Sonos players.

I know I can do (and have done), automations for volume up/down buttons, but have any of you created a BIG (cutomizable size), volume slider for controlling volume on a mediaplayer ? Preferrably Lovelace, but HAdahboard will aso do, as I’m using a mix of these.

/Michael
Have any of you creat

2 Likes

https://github.com/thomasloven/lovelace-slider-entity-row will do what you want. I use it in conjuction with custom button card for this below:

# resources:
#   - url: /community_plugin/button-card/button-card.js
#     type: module
#   - url: /community_plugin/lovelace-card-mod/card-mod.js
#     type: module
#   - url: /community_plugin/lovelace-card-tools/card-tools.js
#     type: js
#   - url: /community_plugin/lovelace-layout-card/layout-card.js
#     type: js
#   - url: /community_plugin/lovelace-slider-entity-row/slider-entity-row.js
#     type: js
#   - url: /community_plugin/mini-media-player/mini-media-player.js
#     type: module
# REMOTE
title: Remote
cards:
  - type: vertical-stack
    cards:
# INPUT ROW
          - type: entities
            style: |
              ha-card {
                  background: transparent;
                  border: solid 1px var(--divider-color);
                  border-radius: 20px;
                }
            entities:
  # MEDIA PLAYER
              - type: custom:mini-media-player
                entity: media_player.plex
                group: true
                hide:
                  name: true
                  icon: true
                  volume: true
                  controls: true
                  shuffle: true
                  power: true
              - type: section
              - type: custom:hui-horizontal-stack-card
                cards:
                - type: custom:button-card
                  entity: media_player.main_zone
                  name: FireTV
                  icon: mdi:amazon-alexa
                  tap_action:
                    action: call-service
                    service: media_player.select_source
                    service_data:
                      entity_id:  media_player.main_zone
                      source: Fire TV
                  state:
                    - operator: template
                      value: 
                        return states['media_player.main_zone'].attributes.source === 'Fire TV'
                      color: green
                - type: custom:button-card
                  entity: media_player.main_zone
                  name: PS4
                  icon: mdi:playstation
                  tap_action:
                    action: call-service
                    service: media_player.select_source
                    service_data:
                      entity_id:  media_player.main_zone
                      source: PS4
                    state:
                      - operator: template
                        value: 
                          return states['media_player.main_zone'].attributes.source === 'PS4'
                        color: green
                - type: custom:button-card
                  entity: media_player.main_zone
                  name: Switch
                  icon: mdi:nintendo-switch
                  tap_action:
                    action: call-service
                    service: media_player.select_source
                    service_data:
                      entity_id:  media_player.main_zone
                      source: Switch
                  state:
                    - operator: template
                      value: 
                        return states['media_player.main_zone'].attributes.source === 'Switch'
                      color: green
                - type: custom:button-card
                  entity: media_player.main_zone
                  name: RetroPi
                  icon: mdi:gamepad-variant
                  tap_action:
                    action: call-service
                    service: media_player.select_source
                    service_data:
                      entity_id:  media_player.main_zone
                      source: RetroPi
                  state:
                    - operator: template
                      value: 
                        return states['media_player.main_zone'].attributes.source === 'RetroPi'
                      color: green            
                - type: custom:button-card
                  entity: media_player.main_zone
                  name: HTPC
                  icon: mdi:server
                  tap_action:
                    action: call-service
                    service: media_player.select_source
                    service_data:
                      entity_id:  media_player.main_zone
                      source: Blackbox
                  state:
                    - operator: template
                      value: 
                        return states['media_player.main_zone'].attributes.source === 'Blackbox'
                      color: green


    # APPS ROW
              - type: section
              - type: custom:hui-horizontal-stack-card
                cards:
                - type: "custom:button-card"
                  color_type: card
                  color: "var(--secondary-background-color)"
                  icon: mdi:amazon
                  tap_action:
                    action: call-service
                    service: media_player.select_source
                    service_data:
                      entity_id: media_player.firetv_livingroom
                      source: "com.amazon.amazonvideo.livingroom"
                - type: "custom:button-card"
                  color_type: card
                  color: "var(--secondary-background-color)"
                  icon: mdi:plex
                  tap_action:
                    action: service
                    service: media_player.select_source
                    service_data:
                      entity_id: media_player.firetv_livingroom
                      source: "com.plexapp.android"
                - type: "custom:button-card"
                  color_type: card
                  color: "var(--secondary-background-color)"
                  icon: mdi:hulu
                  tap_action:
                    action: call-service
                    service: media_player.select_source
                    service_data:
                      entity_id: media_player.firetv_livingroom
                      source: "com.hulu.plus"
                - type: "custom:button-card"
                  color_type: card
                  color: "var(--secondary-background-color)"
                  icon: mdi:netflix
                  tap_action:
                    action: call-service
                    service: media_player.select_source
                    service_data:
                      entity_id: media_player.firetv_livingroom
                      source: "com.netflix.ninja"
                - type: "custom:button-card"
                  color_type: card
                  color: "var(--secondary-background-color)"
                  icon: mdi:television
                  tap_action:
                    action: service
                    service: media_player.select_source
                    service_data:
                      entity_id: media_player.firetv_livingroom
                      source: "com.silicondust.view"
                - type: "custom:button-card"
                  color_type: card
                  color: "var(--secondary-background-color)"
                  icon: mdi:youtube
                  tap_action:
                    action: service
                    service: media_player.select_source
                    service_data:
                      entity_id: media_player.firetv_livingroom
                      source: "com.liskovsoft.videomanager"
              - type: section

    # FIRST ROW
              - type: custom:hui-horizontal-stack-card
                cards:
                - type: custom:button-card
                  color_type: blank-card
                - type: custom:button-card
                  color_type: icon
                  icon: mdi:arrow-up-drop-circle
                  size: 70%
                  height: 85px
                  width: 85px
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - box-shadow: none
                      - background: transparent
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: DirectionUp
                      device: 63477698
                - type: "custom:button-card"
                  color_type: blank-card
        # second row
              - type: custom:hui-horizontal-stack-card
                cards:
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:arrow-left-drop-circle
                  size: 70%
                  height: 85px
                  width: 85px
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - box-shadow: none
                      - background: transparent
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: DirectionLeft
                      device: 63477698
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:circle-slice-8
                  size: 70%
                  height: 85px
                  width: 85px
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - box-shadow: none
                      - background: transparent
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: OK
                      device: 63477698
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:arrow-right-drop-circle
                  size: 70%
                  height: 85px
                  width: 85px
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - box-shadow: none
                      - background: transparent
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: DirectionRight
                      device: 63477698
    # third row
              - type: custom:hui-horizontal-stack-card
                cards:
                - type: "custom:button-card"
                  color_type: blank-card
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:arrow-down-drop-circle
                  size: 70%
                  height: 85px
                  width: 85px
                  aspect_ratio: 1/1
                  styles:
                    card:
                      - box-shadow: none
                      - background: transparent
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: DirectionDown
                      device: 63477698
                - type: "custom:button-card"
                  color_type: blank-card
              - type: section
  # BACK, HOME, MENU
              - type: custom:hui-horizontal-stack-card
                cards:
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:undo-variant
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: back
                      device: 63477698
                - type: "custom:button-card"
                  color_type: blank-card
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:home-outline
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: home
                      device: 63477698
                - type: "custom:button-card"
                  color_type: blank-card
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:menu
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: menu
                      device: 63477698
              - type: section
        # PLAY, PAUSE, FORWARD, REWIND

              - type: custom:hui-horizontal-stack-card
                cards:
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:skip-previous
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: SkipBack
                      device: 63477698
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:rewind
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: Rewind
                      device: 63477698
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:play-pause
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: Pause
                      device: 63477698
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:fast-forward
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: "FastForward"
                      device: "Fire TV"
                - type: "custom:button-card"
                  color_type: icon
                  icon: mdi:skip-next
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.livingroom
                      command: 'SkipForward'
                      device: 63477698

        # VOLUME SLIDER
              - type: section
              - type: custom:slider-entity-row
                entity: media_player.main_zone
                full_row: true
              - type: custom:hui-horizontal-stack-card
                cards:
                  - type: "custom:button-card"
                    color_type: icon
                    icon: mdi:volume-minus
                    tap_action:
                      action: call-service
                      service: media_player.volume_down
                      service_data:
                        entity_id:  media_player.main_zone
                    hold_action:
                      action: call-service
                      repeat: 300
                      service: media_player.volume_down
                      service_data:
                        entity_id:  media_player.main_zone
                  - type: "custom:button-card"
                    color_type: blank-card

                  - type: "custom:button-card"
                    entity: media_player.main_zone
                    show_name: false
                    color_type: icon
                    icon: mdi:volume-mute
                    tap_action:
                        action: call-service
                        service: script.toggle_mute_unmute
                        service_data:
                          entity_id:  media_player.main_zone
                    state:
                    - operator: template
                      value: >
                        return states['media_player.main_zone'].state != 'off'
                        && states['media_player.main_zone'].attributes.is_volume_muted;
                      color: '#FF0000'
                    - operator: default
                      color: var(--primary-text-color)
                  - type: "custom:button-card"
                    color_type: blank-card

                  - type: "custom:button-card"
                    color_type: icon
                    icon: mdi:volume-plus
                    tap_action:
                      action: call-service
                      service: media_player.volume_up
                      service_data:
                        entity_id:  media_player.main_zone
                    hold_action:
                      action: call-service
                      repeat: 300
                      service: media_player.volume_up
                      service_data:
                        entity_id:  media_player.main_zone
              - type: section


Hello Raul

From first readthrough, it seems that the “full row” will in fact do the trick - and thank you for that suggestion !

I was kind of hoping for at more graphically appealing version, than the standard build-in slider, but can work with this, until a more fancy version comes up. The essense of finding a full width volume slider, is present, so thank you again.

/Michael.

@MichaelJ2600 you should be able to style it with card-mod https://github.com/thomasloven/lovelace-card-mod or card-modder https://github.com/thomasloven/lovelace-card-modder

Here is a card-mod example:

@raul

where does the “- type: section” come from?

It doesn’t seem to be a built-in card because I’m getting a “custom element doesn’t exist” error.

You have to install the individual custom cards. I personally started using HACS to do that. Also you need to uncomment or add the custom cards to the resources section of the ui-lovelace.yaml

Hey @MichaelJ2600, glad you like my mini-media-player project.

One option would be to use the mini-media-player card but hiding a few things (name, icon & info primarily).
If you then use the group option and put it in an entities card or a stack of some sort, you could basically build your own card.

39

# example config
- entity: media_player.example
  type: custom:mini-media-player
  hide:
    name: true
    icon: true
    info: true
    power: true
    source: true
    mute: true
    controls: true
2 Likes

Yeah, I know that. I just didn’t know which custom card provided that functionality.

Hello Kalkih

That does it for me - thanks !
I was now aware of the detailed “Hide” functionality.

/Michael

1 Like

Hello

Just as an info to others. I had to update from 0.9.8 to 1.2.2 of the card, to make the volume slider fill all the width in panel mode. In 0.9.8 it was only filling about a third.
Yes yes, I know - update frequently, you fool Michael :grinning:

Now it’s as faboulous as the main card itself. Remember, I use a mix of HADashboard and lovelace.

Please note the fact, that it is visually shown that the two top players were joined, at the time of the screenshot.

1 Like