Volume Slider Quick Problem, Easy Solution HELP

1st Screenshot

2nd Screenshot:

Trying to create a volume slider with the mushroom theme and I can’t seem to figure it out. 2nd screenshot has it in the 1,000’s and obviosuly want it to be 0 - 100

Using the Roku Intergration, custom slider button card, media player card and mushroom card

I saw this post: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2142 by rhysb

Still don’t fully understand what I’m doing wrong

I think this is super simple but I’m just not understanding what’s going.

1st Screenshot Code:

type: custom:slider-button-card
entity: media_player.lr_tv
volume_controls:

  • volume_mute
  • volume_set
  • volume_buttons
    slider:
    direction: left-right
    background: gradient
    use_state_color: true
    use_percentage_bg_opacity: false
    show_track: false
    toggle_on_click: false
    force_square: false
    show_name: true
    show_state: true
    compact: false
    icon:
    show: true
    use_state_color: true
    tap_action:
    action: more-info
    action_button:
    mode: toggle
    icon: mdi:power
    show: true
    show_spinner: true
    tap_action:
    action: toggle

2nd Screenshot Code:

type: custom:stack-in-card
cards:

  • type: custom:mushroom-template-card
    name: Living Room TV Volume
    entity: input_number.living_room_sound_test
    icon: |
    {% set vol_level = states(entity) | float %}
    {% if vol_level == 0 %}
    mdi:volume-mute
    {% elif vol_level > 0.66 %}
    mdi:volume-high
    {% elif vol_level < 0.33 %}
    mdi:volume-low
    {% else %}
    mdi:volume-medium
    {% endif %}
    icon_color: indigo
    primary: Volume
    secondary: |
    {% set vol = states(entity) | float * 100 %}
    {{ vol | round | int }}%
  • type: custom:my-slider
    entity: input_number.living_room_sound_test
    radius: 12px
    height: 42px
    mainSliderColor: rgb(var(–mush-rgb-indigo))
    secondarySliderColor: rgba(var(–mush-rgb-indigo), 0.2)
    mainSliderColorOff: rgb(var(–mush-rgb-disabled))
    secondarySliderColorOff: rgba(var(–mush-rgb-disabled), 0.2)
    thumbHorizontalPadding: 0px
    thumbVerticalPadding: 0px
    thumbWidth: 0px
    card_mod:
    style: |
    ha-card {
    padding: 0px 11px 11px;
    –mush-rgb-disabled: 189,189,189;
    –mush-rgb-indigo: 63, 81, 181;
    }

What does this entity ^^^ show as its state in dev tools? Looks like you expect the state of that entity to be a decimal between 0.0 - 1.0 (basically, a percentage of max?) I suspect that’s either not what you actually have there or your math is incorrect where you are doing your multiplication. Open it in dev-tools and check and it’ll tell you if you have a problem in your secondary attribute template or the entity itself.

The state did say 66% when I checked it. So I changed the {% set vol = states(entity) | float * 100 %} to {% set vol = states(entity) | float * 1 %} and that looks correct as far as 1 - 100 volume. (see screenshot above)

I think my main question is while the configuration above looks correct is what am I missing to link the remote volume with that input_number.living_room_sound_test? Or should I approach the configuration a different way for more reliable success.

Any update for me?

Yeah now that I understand what you’re trying to do… You’re going to have trouble acting on that volume real time by referencing an entity then replicating its state -many cards have the ability to target an entity’s attributes directly:

Like the slider-entity-row card
can target the volume-level attribute of my master bedroom soundbar:

type: custom:slider-entity-row
entity: media_player.master_bedroom_homecinema
attribute: volume_level
name: Volume
icon: mdi:volume-high

To produce:
image

A working volume slider…

THEN style the card as necessary. (Don’t let form define function - make it work first. edit: Yes I know you’re looking for the bar styling in mushroom. I think the ability to target an attribute with the mushroom entity card would be a stellar feature request… My point however is the same - dont go so far trying to make it look good you start working around core functionality, like referencing an attribute…

1 Like

No need to re-invent the wheel, just use the Mushroom Media card as the volume control:

type: custom:mushroom-media-player-card
entity: media_player.family_room
show_volume_level: true
volume_controls:
  - volume_set
  - volume_mute
use_media_info: false
card_mod:
  style: |
    mushroom-shape-icon {
      {% set vol_level = state_attr(config.entity, 'volume_level') | float %}
      --card-mod-icon:
      {% if state_attr(config.entity, 'is_volume_muted') == true %}
        mdi:volume-mute
      {% else %}
        {% if vol_level > 0.66 %}
          mdi:volume-high
        {% elif vol_level < 0.33 %}
          mdi:volume-low
        {% else %}
          mdi:volume-medium
        {% endif %}
      {% endif %};
    }
2 Likes

So I did as you suggest and copied the above YAML, added in my media player but I’m not getting slider control of the volume. It’s just acting as a button and not a slider

type: custom:mushroom-media-player-card
entity: media_player.lr_tv
show_volume_level: true
volume_controls:
  - volume_mute
  - volume_set
use_media_info: true
media_controls:
  - on_off
  - shuffle
  - previous
  - play_pause_stop
  - next
  - repeat
collapsible_controls: true
card_mod:
  style: |
    mushroom-shape-icon {
      {% set vol_level = state_attr(config.entity, 'volume_level') | float %}
      --card-mod-icon:
      {% if state_attr(config.entity, 'is_volume_muted') == true %}
        mdi:volume-mute
      {% else %}
        {% if vol_level > 0.66 %}
          mdi:volume-high
        {% elif vol_level < 0.33 %}
          mdi:volume-low
        {% else %}
          mdi:volume-medium
        {% endif %}
      {% endif %};
    }

What attributes does dev tools show for media_player.lr_tv?

source_list:
  - Home
  - AV
  - Apple TV
  - DIRECTV STREAM
  - Deep Space Collection
  - Disney Plus
  - ESPN
  - FloSports
  - HBO Max
  - "HDMI\_3"
  - "HDMI\_4\_(ARC)"
  - Hulu
  - Kanopy
  - "Live\_TV"
  - Netflix
  - Paramount Plus
  - Peacock TV
  - PlayStation 4
  - PlayStation 4
  - Pluto TV - It's Free TV
  - Prime Video
  - Roku TV Intro
  - SHOWTIME
  - Spotify Music
  - TLC GO
  - The Criterion Channel
  - The Roku Channel
  - Tubi - Free Movies & TV
  - Vimeo
  - Vudu Movie & TV Store
  - YouTube
  - YouTube TV
  - adult swim
  - discovery+ | Stream TV Shows
  - fuboTV Watch Live Sports & TV
app_name: Roku
source: Roku
device_class: tv
icon: mdi:youtube-tv
friendly_name: Living Room TV
supported_features: 151481