Custom Features for Home Assistant Cards - Buttons, Sliders, Selectors, and Spinboxes

ahhhhh, I assumed the built in animation are inherited. That explains it! Thanks!

how did you do that fantastic tile title? I love it !

1 Like

Do you refer to the images? Those are just simple images I drew for myself with random photos, used by simple HA image cards.

Temperature and humidity values would be nice on them, but what HA offer for it is not perfect…

no I was talking about the background of the room name.

Great card! I like (mis-)using the slider without action as an alternative to the bar-card. Made this visualization for PV forecast.
image
Any chance to mend the actual value that is used to render the slider, maybe via css? Something like “:host {value: {{ calculation }} }”?
Ah, and while I am just seeing this, any way to center the individual lines of the multi-line label relative instead of having it left aligned?

Yeah, exactly those are which I mentioned… Those are simple custom raster images. I drew them 1 by 1 from random photos. I imagined an aspect ratio, drew the shape of the header, selected a font, and ‘dropped them together’, and at the end linked by an image card to HA, only to bring some life into my raw and dry dashboards…

Example:

(The photo is not mine, I’m just using it for my very own ‘internal’ goals…)

I’m not sure what you mean by mending the slider value. You can change the slider label value based on it’s actual value using templates like {{ value / 100 }}%. You can also adjust it’s range using the built in range options, and change these ranges using templates.

While both lines in the label are part of the same HTML inner text, you can change it’s overall alignment using css.

.label {
  text-align: center;
}