Volume Slider Quick Problem, Easy Solution HELP

KyleBrown0221 · September 14, 2022, 12:07am

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;
}

NathanCu · September 14, 2022, 1:25am

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.

KyleBrown0221 · September 14, 2022, 3:23am

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.

KyleBrown0221 · September 15, 2022, 10:36pm

Any update for me?

NathanCu · September 16, 2022, 3:43am

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:

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…

rhysb · September 17, 2022, 12:06am

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 %};
    }

KyleBrown0221 · September 20, 2022, 8:56pm

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 %};
    }

rhysb · September 20, 2022, 10:02pm

What attributes does dev tools show for media_player.lr_tv?

KyleBrown0221 · September 21, 2022, 7:32pm

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

KyleBrown0221 · September 27, 2022, 5:10pm

Following up on this @rhysb any update?

KyleBrown0221 · October 3, 2022, 2:05pm

Any thoughts @rhysb ?

rhysb · October 3, 2022, 10:30pm

Looks like your media_player does not support VOLUME_SET (volume_level) which is used by the volume slider. Looking at the supported_features it does support VOLUME_STEP (up & down) and VOLUME_MUTE though. Unfortunately you will not be able to control the volume of this media player with a slider.

KyleBrown0221 · October 4, 2022, 3:16am

That makes sense. I’m using the Roku Integration for the Living Room TV. I tested it with the Alexa media player and that seemed to work. How would I confirm that the Roku integration doesn’t support ‘VOLUME_SET’

I don’t see anywhere on the roku integration page about volume. Wondering if i have it set-up wrong?

rhysb · October 4, 2022, 3:31am

Many media integrations do not have this feature. Volume_level becomes available on my Echoes only when they are playing something.