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).
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.
Is there a way to sneak an icon under the slider (for night mode), on the same row?
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?
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);
}
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.
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.
Version 4.6.0 has one big feature - the Android TV keyboard no longer uses ADB. Huge thanks to @astrokin for reverse engineering sending text via the Android TV Remote API and @tronikos for adding a way to use this new method via Home Assistant actions. You’ll no longer see the Keyboard ID field for most platforms as it is redundant and no longer needed.
You can still use the old ADB keyboard and search methods by creating a custom element keyboard/textbox/search action with the platform Fire TV.
What a fantasic card. I’m on the the way to exchange my Logitech Harmony with an old smartphone with this card.
I would like to have a different color behind the navigation buttons, anyone knows the css for this?
In the editor preview hover over the navigation buttons such that all of them have a red outline like in your screenshot but wait until the column ID selector appears as a tooltip, and then use that to add a background with the general CSS styles field.
Thanks a lot. I saw the tooltip before, but did not know there is a general CSS styles field.
Works as expected, keep on the fantastic work and many thanks for the support!
What a well-designed card! Took a while to figure out syntax, but now I have my Logitech Harmony Hub working with my Vizio SmartCast TV, along with a Denon receiver.
I couldn’t find any examples of this combination, so here I submit my 300 lines of YAML, in the hope it inspires someone else.
You used the card configuration UI right? It makes setup much easier. FYI Material You theme works best when you set it at the user level (not in the view or card) with the companion Material You Utilities module.
I need some help with configuring my mute button to toggle mute on/off. I’m using a SONOS Beam for the volume and have failed so far to toggle the mute with a single button. I know this needs some kind of boolean check to see whether the volume is muted or not but I don’t know how to add that. Can anyone help amend my code:
Hey @Nerwyn Great plugin and I’m busy setting up dashboards and remotes for my living room, cinema, etc.
But, I have an odd problem. For my Harmony Hub integration I have setup a number of actions and in the remote I have successfully assigned this actions to custom buttons. For example, a button for the TV directional control up works great. Same for the other directional controls.
But, the circlepad looks nicer in the UI. So, I created a custom circlepad control and the assigned the up, down, etc to the same actions as the existing equivalent buttons. But, tapping the circlepad doesn’t run any of the actions nothing happens. What am I missing? Here’s a cut-down configuration:
It fails on all my devices, latest chrome on my Windows laptop, Android tablet and mobile phone. I also tried using Edge on Windows, still doesn’t work.
The odd thing is I’ve also setup the circlepad on a Roku remote. That works, but that is one of the built in supported remotes and its tap behaviour is key.
It just appears to be the generic remote / perform action setup that fails.
UPDATE: I get the following error in the logs when I try and use the circlepad:
Logger: homeassistant.components.harmony.remote
Source: components/harmony/remote.py:242
integration: Logitech Harmony Hub (documentation, issues)
First occurred: 15 July 2025 at 16:39:43 (42 occurrences)
Last logged: 14:29:13
Harmony Hub: Missing required argument: device
I don’t get the log message when I create a button and add that action to the button. Up/down work fine when it’s a button. It’s only when the circlepad buttons are pressed that I get the log message.
