Maybe you can create it by trial and error using the Sonos media card? Itās using some templating to retrieve media attributes such as played track and artist etc. Maybe u can use the template format/layout to realise what you want?
I would like to share my Climate card for the once who are interested. The card itself makes use of the following HACS lovelace integrations:
Bubble Card (Optional)
Custom Button Card
Mushroom Card
Iāve placed the Cardās my self in a Pop Up bubble card. So whenever i press (tap_action) the Room Temperature Graph cards, a pop up opens with all my room thermostats. The code for the Custom Button Card can be found below. Donāt hesitate to ask questions if you have!
Code
type: custom:button-card
entity: climate.living_room
name: Woonkamer
icon: phu:rooms-living
label: >-
[[[ return states['climate.living_room'].attributes.current_temperature + "
Ā°C";
]]]
show_label: true
tap_action:
action: none
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: input_number.temperature_setting_living_room
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 34px
- padding: 0 8px
- background: >-
linear-gradient(90deg, rgba(177,197,255, 0.5) 0%,
rgba(255,175,131, 1) 100%
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: var(--black)
- top: 5px
- right: '-6px'
- height: 24px
- width: 24px
- border-radius: 100px
setting:
card:
type: custom:mushroom-climate-card
entity: climate.living_room
show_temperature_control: true
primary_info: none
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
icon_type: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
color: var(--contrast10) !important;}
#container .button:nth-child(1) {
--card-mod-icon-color: var(--contrast10);
}
#container .button:nth-child(3) {
--card-mod-icon-color: var(--contrast10);
}
.: |
ha-card {
background-color: transparent;
border: 0px
}
styles:
grid:
- grid-template-areas: '"i l" "n setting" "slider slider"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: rgba(144, 191, 255,var(--color-tint))
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 60px
- margin: 1% 0 -10% 0
icon:
- width: 60px
- height: 60px
- color: var(--contrast20)
name:
- justify-self: start
- font-size: 26px
- margin: 4px 0 12px 0
- color: var(--contrast20)
label:
- justify-self: end
- font-weight: bold
- font-size: 26px
- margin: 1% 11% -10% 0
- color: var(--contrast20)
custom_fields:
setting:
- justify-self: end
- margin: 4px 0 12px 0
- font-size: 16px
- width: 130px
8 Likes
This is actually a really good idea. I was struggling with an idea for a good climate card and just gave up on it.
Hi,
Thank you for sharing :}
few things:
- how can we know the climate status with your card,
(for exaple changing the card color for every mode). - Iāll be happy if you can share the code including the bubble card code.
- explantion for the input number
Thank You
- My Climate System doesnāt have any modes. So, thatās not implemented, but you could probably do that yourself by making use of the State Value function from the custom button card and assigning different colors for every mode. The Media Card created by LE0N is a good example of that, as the background of the remote button card is colored per state.
2. Complete Bubble-Card Code
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#climate'
icon: mdi:home-thermometer-outline
margin_top_mobile: '-56px'
name: Kamer Instellingen
- type: custom:button-card
entity: climate.living_room
name: Woonkamer
icon: phu:rooms-living
label: >-
[[[ return states['climate.living_room'].attributes.current_temperature +
" Ā°C";
]]]
show_label: true
tap_action:
action: none
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: input_number.temperature_setting_living_room
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 34px
- padding: 0 8px
- background: var(--temperature)
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: var(--black)
- top: 5px
- right: '-20px'
- height: 24px
- width: 24px
- border-radius: 100px
setting:
card:
type: custom:mushroom-climate-card
entity: climate.living_room
show_temperature_control: true
primary_info: none
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
icon_type: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
:host {
--bg-color: var(--blue-tint) !important;
}
.value {
color: var(--contrast10) !important;}
#container .button:nth-child(1) {
--card-mod-icon-color: var(--contrast10);
}
#container .button:nth-child(3) {
--card-mod-icon-color: var(--contrast10);
}
.: |
ha-card {
background-color: transparent;
border: 0px
}
styles:
grid:
- grid-template-areas: '"i l" "n setting" "slider slider"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--blue-tint)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 60px
- margin: 1% 0 -10% 0
icon:
- width: 60px
- height: 60px
- color: var(--contrast20)
name:
- justify-self: start
- font-size: 26px
- margin: 4px 0 12px 0
- color: var(--contrast20)
label:
- justify-self: end
- font-weight: bold
- font-size: 26px
- margin: 1% 11% -10% 0
- color: var(--contrast20)
custom_fields:
setting:
- justify-self: end
- margin: 4px 0 12px 0
- font-size: 16px
- width: 130px
- type: custom:button-card
entity: climate.bedroom
name: Slaapkamer
icon: phu:rooms-bedroom
label: >-
[[[ return states['climate.bedroom'].attributes.current_temperature + "
Ā°C";
]]]
show_label: true
tap_action:
action: none
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: input_number.temperature_setting_bedroom
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 34px
- padding: 0 8px
- background: var(--temperature)
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: var(--black)
- top: 5px
- right: '-20px'
- height: 24px
- width: 24px
- border-radius: 100px
setting:
card:
type: custom:mushroom-climate-card
entity: climate.bedroom
show_temperature_control: true
primary_info: none
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
icon_type: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
:host {
--bg-color: var(--blue-tint) !important;
}
.value {
color: var(--contrast10) !important;}
#container .button:nth-child(1) {
--card-mod-icon-color: var(--contrast10);
}
#container .button:nth-child(3) {
--card-mod-icon-color: var(--contrast10);
}
.: |
ha-card {
background-color: transparent;
border: 0px
}
styles:
grid:
- grid-template-areas: '"i l" "n setting" "slider slider"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--blue-tint)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 60px
- margin: 1% 0 -10% 0
icon:
- width: 60px
- height: 60px
- color: var(--contrast20)
name:
- justify-self: start
- font-size: 26px
- margin: 4px 0 12px 0
- color: var(--contrast20)
label:
- justify-self: end
- font-weight: bold
- font-size: 26px
- margin: 1% 11% -10% 0
- color: var(--contrast20)
custom_fields:
setting:
- justify-self: end
- margin: 4px 0 12px 0
- font-size: 16px
- width: 130px
- type: custom:button-card
entity: climate.bathroom
name: Badkamer
icon: phu:rooms-bathroom
label: >-
[[[ return states['climate.bathroom'].attributes.current_temperature + "
Ā°C";
]]]
show_label: true
tap_action:
action: none
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: input_number.temperature_setting_bathroom
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 34px
- padding: 0 8px
- background: var(--temperature)
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: var(--black)
- top: 5px
- right: '-20px'
- height: 24px
- width: 24px
- border-radius: 100px
setting:
card:
type: custom:mushroom-climate-card
entity: climate.bathroom
show_temperature_control: true
primary_info: none
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
icon_type: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
:host {
--bg-color: var(--blue-tint) !important;
}
.value {
color: var(--contrast10) !important;}
#container .button:nth-child(1) {
--card-mod-icon-color: var(--contrast10);
}
#container .button:nth-child(3) {
--card-mod-icon-color: var(--contrast10);
}
.: |
ha-card {
background-color: transparent;
border: 0px
}
styles:
grid:
- grid-template-areas: '"i l" "n setting" "slider slider"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--blue-tint)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 60px
- margin: 1% 0 -10% 0
icon:
- width: 60px
- height: 60px
- color: var(--contrast20)
name:
- justify-self: start
- font-size: 26px
- margin: 4px 0 12px 0
- color: var(--contrast20)
label:
- justify-self: end
- font-weight: bold
- font-size: 26px
- margin: 1% 11% -10% 0
- color: var(--contrast20)
custom_fields:
setting:
- justify-self: end
- margin: 4px 0 12px 0
- font-size: 16px
- width: 130px
- The input number is a custom number corresponding to my thermostat (4.0 - 35.0), representing the value that can be set on the unit itself. The slider in the card can change this input number, and via an automation, it sets the target temperature on the thermostat. Whenever I change the target temperature on the thermostat itself, it also updates the input number via the same automation but different trigger id to maintain a closed loop.
Hope this explains it all!
2 Likes
great!
can you share the input number automation?
Thanks
Yeah sure! Here you are!
Automation Code
alias: Temperature Slider - Living room
description: Automation which changes the Tempature Settings.
trigger:
- platform: state
entity_id:
- input_number.temperature_setting_living_room
from: null
to: null
id: "0"
- platform: state
entity_id:
- climate.living_room
attribute: temperature
id: "1"
condition: []
action:
- choose:
- conditions:
- condition: trigger
id:
- "0"
sequence:
- service: climate.set_temperature
data:
temperature: >-
{{ states("input_number.temperature_setting_living_room") |
float (0) }}
target:
entity_id: climate.living_room
- conditions:
- condition: trigger
id:
- "1"
sequence:
- service: input_number.set_value
data:
value: "{{ state_attr('climate.living_room', 'temperature') }}"
target:
entity_id: input_number.temperature_setting_living_room
mode: single
Please be sure to test it yourself before using it!
1 Like
thank you working great
Itās all explained on GitHub 
Hey, sorry for the late reply!
Here is the code
type: grid
columns: 2
square: false
cards:
- type: custom:stack-in-card
mode: vertical
keep:
margin: true
border_radius: true
background: true
outer_padding: false
card_mod:
style: |
ha-card {
border-radius: 25px;
{% if is_state('cover.shellyplus2pm_5443b23efedc', 'open') %}
background-color: var(--blue-tint);
border-radius: 15px;
{% elif is_state('cover.shellyplus2pm_5443b23efedc', 'opening') %}
background-color: var(--brown-tint);
{% elif is_state('cover.shellyplus2pm_5443b23efedc', 'closing') %}
background-color: var(--brown-tint);
{% elif is_state('cover.shellyplus2pm_5443b23efedc', 'closed') %}
background-color: var(--contrast00);
{% else %}
background-color: var(--red);
{% endif %}
}
cards:
- type: custom:button-card
entity: cover.shellyplus2pm_5443b23efedc
name: >-
[[[return
states["cover.shellyplus2pm_5443b23efedc"].attributes.current_position]]]
styles:
grid:
- grid-template-areas: '"n percent" "l l"'
- grid-template-columns: min-content min-content
name:
- font-size: 32px
- color: var(--contrast20)
card:
- height: 80px
- border-radius: 24px
- padding: 0px 0 6px 6px
- box-sizing: border-box
- background: none
- box-shadow: none
- margin-bottom: '-10px'
- '--mdc-ripple-press-opacity': 0
label:
- justify-self: start
- font-size: 12px
- color: var(--contrast20)
- margin-bottom: 6px
custom_fields:
percent:
- font-size: 12px
- color: var(--contrast10)
- margin-bottom: '-20px'
- padding-left: 2px
- margin-right: 100px
label: Triangolo
custom_fields:
percent: ' %'
show_label: true
tap_action:
action: more-info
state:
- value: open
label: Triangolo aperto
styles:
label:
- color: var(--contrast20)
- font-family: Product Sans
name:
- color: var(--blue)
- font-family: Product Sans Medium
- value: closed
label: Triangolo chiuso
name: '0'
styles:
name:
- color: var(--contrast10)
- font-family: Product Sans Medium
- font-size: 24px
label:
- font-family: Product Sans
- value: closing
name: In chiusura
label: Triangolo
styles:
name:
- color: var(--brown)
- font-family: Product Sans Medium
- font-size: 14px
- value: opening
name: In apertura
label: Triangolo
styles:
name:
- color: var(--brown)
- font-family: Product Sans Medium
- font-size: 14px
- type: custom:my-slider-v2
entity: cover.shellyplus2pm_5443b23efedc
vertical: false
styles:
container:
- border-radius: 100px
- overflow: visible
- background: none
card:
- height: 26px
- padding: 0px 20px 0px 8px
- background: |
[[[
if (entity.state == "open") return "var(--slidertriangolo)";
else return "var(--slidertriangolooff)";
]]]
- margin-bottom: 15px
- margin-left: 5px
- margin-right: 5px
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: var(--black)
- top: 2px
- right: '-18px'
- height: 22px
- width: 22px
- border-radius: 100px
For slider on/off colors, put this in the theme
slidertriangolo: linear-gradient(90deg, rgba(var(--slidertriangolo-low-rgb), 0.4) 0%, rgba(var(--slidertriangolo-high-rgb), 1) 100%)
slidertriangolooff: linear-gradient(90deg, rgba(var(--slidertriangolo-low-rgb), 0.2) 0%, rgba(var(--slidertriangolo-high-rgb), 0.4) 100%)
If you want, I also made one for a switch.
I use it for opening the gate
type: horizontal-stack
cards:
- type: custom:button-card
show_name: false
icon: mdi:hospital
double_tap_action:
action: none
hold_action:
action: navigate
navigation_path: /help
haptic: heavy
tap_action:
action: none
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--red)
- height: 100%
- width: 70px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: center
- width: 54px
icon:
- width: 44px
- height: 44px
- color: var(--black)
card_mod:
style: |
ha-card:active {
transform: scale(0.97);
transition: 100ms !important;
border-radius: 20px;
transform-origin: center;
}
- type: custom:button-card
card_mod:
style: |
ha-card {
transition: 300ms !important;
}
name: GATE
icon: mdi:gate
show_label: true
label: Slide to open
entity: switch.gate
tap_action:
action: none
hold_action:
action: more-info
haptic: light
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 46px
- padding: 0px 0px 0px 5px
- background: |
[[[
if (entity.state == "on") return "var(--orange)";
if (entity.state == "off") return "var(--contrast0)";
else return "var(--contrast0)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--yellow)";
if (entity.state == "off") return "var(--blue)";
else return "var(--contrast8)";
]]]
- top: 4px
- right: 0px
- height: 38px
- width: 38px
- border-radius: 100px
styles:
grid:
- grid-template-areas: '"i" "n" "l" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--blue)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: 200px
img_cell:
- justify-self: start
- margin: 50px 0px 0px 0px
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--black)
name:
- justify-self: start
- font-size: 14px
- margin: 12px 0 20px 0
- color: var(--black)
- font-family: Poppins
label:
- color: var(--black0)
- font-size: 14px
- margin: '-10px 0px 5px 0px'
- font-family: Product Sans Light
state:
- value: 'on'
icon: mdi:gate-open
name: Opening..
styles:
card:
- background: var(--yellow)
- box-shadow: none
icon:
- color: var(--black)
name:
- color: var(--black)
label:
- color: transparent
3 Likes
Update 2023.10 once again broke the header menu bar at the bottom of the dashboards. This is now displayed on top again and is no longer transparent.
Has anyone already found a solution for this?
2 Likes
update card_mod and clear the cache
Hi All,
Iām playing around with this and loving it so far. Is there a way to get it so when a light is off, the slider is hidden, but when the light is on, it displays the slider?
Thanks
Yes, I did this. Just make the portion of code that holds the slider a conditional card.
@Numotiv Are you able to share some sample code? Iāve been playing around and couldnāt get it working
hi where can i get the install files on github is nothingā¦
How can i install it with HACS??? no rounded in FRONTEND
can you help me please?
its like NSA SECURITY X-FILE
thank you!!
There ist nothing to install.
You just have to follow the instructions from the first posts in this thread.
The configuration and customization is completely up to you.
Does anyone else experience the problem that the Taskbar at the bottom doesnāt work anymore and the slide cards are shown smaller (too small) after the latest Home Assistant OS and Core update?
- swipe card
Check to see if there is a card mod update that you need to install. Install it and the clear your browser/app cache.