Universal Remote Card - Buttons, Touchpads, Sliders, and Keyboards for Multiple Platforms

[FoxtrotLima]

Hi Nerwyn! Thank you for your amazing work on this awesome card. It brings everything together in such a cool, usable way. I’m super happy with what I have put together (pic below).

There are a few things with the slider I am still working on, and I would appreciate some guidance (code below).

1. When volume is dragged down to 0, I lose the icon (just see black slider bar), and I would like to have this trigger a mute state w/ corresponding mute icon.

2. Is there a way to sneak an icon under the slider (for night mode), on the same row?

3. I’ve noticed the slider tends to get taller than the associated circlepad & left sided buttons, depending on device (i.e. totally fills the row). Is there simple CSS I am missing for this?

Thanks again for everything!

type: custom:universal-remote-card
media_player_id: media_player.sonos
rows:
  - - - appletv
    - - bluray
    - - PS5
    - - shield
    - - power
  - |
    {% if is_state('input_boolean.ha_scene_bluray','on') %}
    - - - menu
        - null
        - home
        - null
        - back
      - circlepad
      - slider
    - - chapter_back
      - rewind
      - play_pause
      - fast_forward
      - chapter_forward
    {% elif is_state('input_boolean.ha_scene_atv','on') %}
    - - - menu_atv
        - null
        - home_atv
        - null
        - back_atv
      - touchpad
      - slider
    - - rewind_atv
      - play_pause_atv
      - fast_forward_atv
    {% elif is_state('input_boolean.universal_remote_helper','on') %}
    - - null
    - - slider_horizontal
    - - null
    {% elif is_state('input_boolean.ha_scene_theater_off','on') %}
    - - null
    {% endif %}
    - - null
      - fan_down
      - fan_on
      - fan_up
      - null

custom_actions:
  - type: slider
    name: slider
    icon: |
      {% if is_state_attr('media_player.sonos','is_volume_muted',false) %}
      mdi:volume-high
      {% elif is_state_attr('media_player.sonos','is_volume_muted',true) %}
      mdi:volume-mute
      {% endif %}
    range:
      - 0
      - 1
    step: 0.01
    value_attribute: volume_level
    tap_action:
      action: perform-action
      perform_action: media_player.volume_set
      data:
        volume_level: "{{ value | float }}"
    vertical: true
    styles: |-
      {% if is_state_attr('media_player.sonos','is_volume_muted',false) %}
        :host {
          --color: white;}
      {% elif is_state_attr('media_player.sonos','is_volume_muted',true) %}
        :host {
          --color: gray;}
        .icon {
          color: white;}
      {% endif %}

[Nerwyn]

1. When volume is dragged down to 0, I lose the icon (just see black slider bar), and I would like to have this trigger a mute state w/ corresponding mute icon.

Templates! Almost all fields are templatable. Use this one for changing the icon based on the slider value. I also added a check for the media player is_volume_muted attribute, assuming that the slider entity is the media player.

mdi:volume-{{ "mute" if (value == config.range[0] or is_state_attr(config.entity, "is_volume_muted", true)) else "high" }}

You’ll also want to add this CSS style to the slider to make the icon visible against the background.

.off .icon {
  color: var(--color);
}

2. Is there a way to sneak an icon under the slider (for night mode), on the same row?

I’m not sure what you mean. You can’t add a second icon to the slider, but you could use a separate custom button element and some CSS on it, the slider, and their parent row/column to position the button below/above the slider.

3. I’ve noticed the slider tends to get taller than the associated circlepad & left sided buttons, depending on device (i.e. totally fills the row). Is there simple CSS I am missing for this?

By default vertical sliders will match their siblings in max height and horizontal sliders will fill the available card/row width. I hadn’t accounted for the circlepads 1:1 aspect ratio shrinking and how that looks with vertical sliders, which do not shrink. You could try to set a static height or max-height to the slider host styles using view width (like max-height: 70vw) to sort of make it shrink with display size like the circlepad does.

[FoxtrotLima]

Thank you so much!