Color temp slider from more-info card

I have been trying all day to add the color temperature slider from the more-info card in an entity row.

To be precise I am using a combo of slider-entity-row, more-info-card and then with card-mod I tried to remove everything else than the color temperature slider. But now I don’t think that is the way, and even if it is I can’t figure it out. Maybe I am making this way to complicated, but it would be cool because in the more-info card, the color slider is only visible when the light is on.

Anyone have an idea how I can pick only the color slider and put in a row under the brightness slider?



hi, did you solve it?

No I didn’t.

This is not difficult with the custom slider-entity-row plugin. You do have to configure it in YAML, so I created a decluttering-card template to easily apply the card without having to type the boilerplate each time. However, if you don’t want to use decluttering-card, it should be apparent how to apply this code without.

    type: entities # If you aren't using decluttering-card (DC), your code will begin here.
    title: "[[title]]" # Replace with desired title if not using DC
    state_color: true
      - type: custom:slider-entity-row
        entity: "[[entity]]" # Replace with entity ID if not using DC
        name: Brightness
        card_mod: # This section gives a grey-white gradient to the brightness slider
            "ha-slider$ paper-progress$": |
              div#progressContainer {
                background-image: linear-gradient(to right, #5C6066 0%, #aaacaf 80%, white 100%);
                --paper-progress-active-color: none;

      - type: custom:slider-entity-row
        entity: "[[entity]]" # Replace with same entity ID as above if not using DC
        attribute: color_temp
        name: Color Temperature
        card_mod: # This section gives a warm-cool color gradient to the slider
            "ha-slider$ paper-progress$": |
              div#progressContainer {
                background-image: linear-gradient(to left,rgb(166, 209, 255) 0%, white 50%, rgb(255, 160, 0) 100%);
                --paper-progress-active-color: none;

If you wanted to use the template, you would just go to “edit dashboard” > hamburger menu (three dots at top right corner) > “raw configuration editor” > paste my code at the very top. Then you could create this card like:

type: custom:decluttering-card
template: light_brightness_color_sliders
  - entity: light.living_room_smart_bulbs
  - title: Smart Bulbs

Here’s an example of what it looks like:

Thanks. I see the same was now implemented in Releases · thomasloven/lovelace-slider-entity-row · GitHub


I am trying to have a constant color of the icon but it seems impossible. Any ideas how to change also in the above configuration the color of the icon, in off state and in on state?

As a reminder in on state the color of the icon changes according to the brightness !!!

PS: any help with a link to YouTube for videos on how the CSS is located for the card_mod will be highly appreciated. I was not able to understand how it works from the readme in GitHub.