Customize slider-entity-row

Hi!

I have merged two cards (slider-entity-row and button-card) by using vertical-stack-in-card. I have then customized slider-entity-row (color) with card-mod.

What I would like to do is modify the slider-entity-row further to reduce its height and change color of the slider and knob.

Any ideas on how to do that? I have localized some ha and var elements in the browser, could they be used?

you gotta adjust the card height. Slider height refers to the actual slider inside the card.

Hi Petro, I have tried everything I can think of, I managed to change some height property but that did not affect the slider as such. Any suggestion would be most welcome.

what card are you using for the slider? You may need to use a different card.

In the above example I have been using slider-entity-row.

As experiments I have also tried light-entity-card but could not get rid off the switch and input_number.slider but could nit get rid off the icon and make the slider full width. Maybe there are ways to solve those issues?

The best you’ll be able to get is the slider entity row. So, if that’s not working with the shorter height, then only a custom built card will.

It seems like the entity-row does not position the slider based on the height of the control, and ultimately that is your problem. If you know js, css, and html, you can build a custom row based on that row and attempt to shorten the height that way. But chances are, you won’t be able to do this with just CSS.

The developer of slider-entity-row pointed me at card-mod. There seems to be ways to manipulate the card with that plugin. I have tried several ideas with card-mod but know too little about coding to figure it out. You have any experience? elements, :host or shadow-root seems to be ways in?

Could it also be possible to modify the .js file?

The latest version 3.0 of button-card allows you to insert a slider-entity-row (or any card) inside the button. I’m experimenting with it, it looks promising.

Thanks, I will give it a try! Did you test my specific issue?

Wel the height looks better is what I saw. I did not try to change color yet, I’m hoping Jimz011 will come up with something to integrate it style wise into his pretty theme.

Thanks! Button-card 3.0 and Slider-entity-row!

Nice :slight_smile:

1 Like

Look’s much better.

As for your previous comment:

There are some things with card mod that cannot be modified. Layout is one of them. I’m not entirely sure what layout is being used for the slider, but chances are the card mod cannot manipulate it. There may be a way, but all my attempts have usually failed.

1 Like

Hi f00dagi,
Can you please share your card code.
Thanks.

Check out my blog where I describe what I did: https://hass-io.blogspot.com/2020/01/lovelace-button-card-with-brightness.html?m=1