Thank you. Most of this has been done, but Iāll give the remaining ideas a try.
Looks great. Out of curiosity is that a slider of sorts on the right? What does it do?
it is only sound / voice slider from my phone . while taking the screenshot 
4 Likes
Hi everyone, this is a great thread to get new ideas. I wanted to show a feature I made for my CCT LED strips. I wanted to have the ability to turn on/off, as well as select the colour temperature without fiddling with a slider. This is what I came up with. Uses a combination of stack-in card, grid cards, and mushroom templates.
Happy to share the YAML if someone is interested.
6 Likes
great!! yes, please YAML. 
Hereās the code for the first entity, the others are a copy-paste with just the entity id changed.
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: rgba(28,28,28,0.6)
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 90% 10%
cards:
- type: custom:mushroom-light-card
entity: light.living_room_strip
fill_container: true
show_brightness_control: true
show_color_control: false
show_color_temp_control: false
use_light_color: true
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 154
target:
entity_id: light.living_room_strip
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0.2);
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: amber
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 267
target:
entity_id: light.living_room_strip
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-amber), 0.2);
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: orange
icon: mdi:lightbulb
tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 500
target:
entity_id: light.living_room_strip
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-orange), 0.2);
}
Here is a visualization to understand the sections of the card:
9 Likes
If my fan has 6 speeds. Is there a way to use the slider on the fan card to choose which speed I want?
I currently have 6 seperate buttons on card
for example 1-16% would be speed 1
17-33% woudl be speed 2
and so on.
1 Like
Another option is to use the template card and media card (whiteout icon, primary info and secondary info) and use the stack card. Than you donāt need to use card mod and are flexible where what info is presented.
for example:
type: custom:stack-in-card
keep:
margin: true
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:mushroom-template-card
primary: |-
{% set s = state_attr(entity, 'source') %}
{% if s %} Spotify - {{s}}
{% else %} Spotify
{% endif %}
secondary: |-
{% set a = state_attr(entity, 'media_artist') %}
{% set t = state_attr(entity, 'media_title') %}
{% if a %} {{a}} - {{t}}
{% else %} Beschikbaar
{% endif %}
icon: mdi:spotify
entity: media_player.spotify_secondary
icon_color: |-
{% set s = state_attr(entity, 'source') %}
{% if s %} deep-orange
{% else %} disabled
{% endif %}
fill_container: true
tap_action:
action: more-info
- type: custom:mushroom-media-player-card
entity: media_player.spotify_secondary
fill_container: true
media_controls:
- shuffle
- previous
- play_pause_stop
- next
- repeat
collapsible_controls: true
icon_type: none
primary_info: none
secondary_info: none
1 Like
Hey I know your one of the coding experts on here . Iām trying to use the mushroom fan card slider to control my 6 speeds on fan . Currently I have 6 seperate buttons set as scripts for the RF BroadLink hub
I found entity-row-slider but my issue is I need it to look like a mushroom card and mushroom slider. Am this be done with fan or template card?
HA and Mushroom should automatically take care of it. I have a tuya based fan controller and I didnāt have to do anything special in Mushroom to get the slider on the fan card to work.
I feel like I still might have trouble because I had to manually program each speed button as a script for this fan. The fan itself is in a smart fan I had to use an RF hub. Good to know though for future fans I might set up. Thanks
Oh yes, for a RF controlled fan you wonāt get the slider working correctly. A really hacky way would be to use an input helper from 0 to 100 and use that as the slider. Then you can create an automation to send the appropriate RF signal based on its value.
I have a mushroom slider pointing to a media_player for one of my TVs. This is my first attempt at using these cards as I like the look, especially of the slider. In the past I used Vol+, Vol- buttons but my wife hates the constant tapping. What I have in the YAML is:
- type: conditional
conditions:
- entity: media_player.office_vizio
state: 'on'
card:
type: custom:mushroom-media-player-card
entity: media_player.office_vizio
fill_container: true
layout: horizontal
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_set
collapsible_controls: false
show_volume_level: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
The overall card looks like this:
What I have observed is a fairly large lag between adjusting the slider and the TV volume control, perhaps one or two seconds or more. I have also noted that it appears I cannot slide more than like 12% at a time, while the slider will go the full length, when I let go it snaps back to about 12% more than the previous setting.
Both of these kinda make this unusable. Is there a better way or is my YAML wrong or?
It appears that a constant volume up is not sent, it merely sends only the end value. But then the end value is limited by 12%. Is this the way it works? Or possibly it sends 40 volume up commands too fast and ends up not at the real volume desired? And as a result, the slider and TV volume get out of sync for a bit.
If yes, would it just be better to create an input_number with some automation to send the final volume number to the media_player? NOTE: I do not even see how to do that as I see no āMushroom Slider Cardā or āInput Number Cardā that would be a slider.
1 Like
Amazing, thatās brilliant. I spent ages looking through the mmp package yaml trying to pick out how they get an accent colour from the artwork and then blend it plus in chrome developer tools. (But I donāt know what im doing) 
1 Like
The entity-row-slider seems to work for me, but it looks nothing like the mushroom slider. And o donāt know how to fix that lol
hello I have a question how did you make the very direcTV card would you like to share the config of this wall this is very nicely made?
Of course (this is without the attempt to put in the mushroom card). You make have to hack things apart as this is DirecTV and also Vizio Smartcast all in one control for many TVs in my house.
I did post all this code here:
I think I am going to try this on some dimmable lights too, but I would suspect the same issue. Certainly folks that show volume control in their setup could respond as possibly I am wrong, but that is not user friendly whatsoever.
Use Custom mushroom template card, in Secondary use the following:
type: custom:mushroom-template-card
primary: |
AC
secondary: >
{%if is_state('climate.ac_estar', 'off')%} Off {% else %}
{%if is_state_attr('climate.ac_estar','hvac_action','idle')%} Idle {% else %}
{%if is_state_attr('climate.ac_estar','hvac_action','heating')%} Heating
{% endif %} {% endif %} {% endif %}
It seams you are displaying the State, but you want the Atribute.
Show your code.
This is cool, although a bit sad that there isnāt a more ānativeā way.
1 Like