Lovelace: Custom Hue Slider

I know it’s an old topic, but has anyone done this with a custom:slider-entity-row that is a custom field inside a custom:button-card? I’ve been staring at my web inspector for hours and tried a bunch of different iterations and nothing ever happens.
Thanks in advance!

  - type: custom:button-card
    icon: mdi:knob
    size: 35%
    template: vol_slider
    custom_fields:
      slider:
        card:
          full_row: true
          hide_state: true
          type: custom:slider-entity-row
          entity: input_number.mini_vol_slider
          card_mod:
            style:
              ha-slider$ paper-progress$: |
                div#progressContainer {
                  background-image: linear-gradient(to right,red,yellow,green,cyan,blue,magenta,red);
                  --paper-progress-active-color: none;
                }

This card mod seems to be broken? Per today I noticed the background bar is white again, without the gradient. Anyone else having this issue?

I just checked mine (still on 2023.10.3) and it is OK. I’ll update and see if it breaks. May have to update the select if something changed.

Did you ever get this to work? I’ll take a look at it if you didn’t.

You are correct. This is now broken in 2023.11. I’ll see if I can determine the cause.

@thomasloven, I just updated the card-mod.js file on my system with the latest, hoping that would solve the issue here, but no joy. It appears the code used to generate these sliders has changed in the HA frontend which has broken this particular card-mod instance (replacing a background image on a slider). I was hoping just the select was wrong, which may still be the case. Would you have any off-the-cuff ideas where to start looking to track this down to repair it, or has changes to the front end made this change impossible? I think I’m going to revert to 2023.10.3 and study the code to see if I can find the changes. Greatly appreciate any help. Cheers.

OK, so it looks like some serious changes were made to the FrontEnd in 2023.11. I’ve made some progress fixing the hue slider to work in this version. The only thing I notice is if you shrink the browser page horizontally, these card-modded sliders don’t scale exactly the same as the default ones do,

However, NONE of the custom-slider-entity-row elements work on the iOS HA app anymore. Is anybody using this custom element any more or has the default HA improved and everyone started using it?

Here is the Hue slider change I found that works. It’s a hack at this point. Perhaps Thomas knows why this no longer works on iOS and has any ideas on how to make my card-mod hack better.

NOTE: Substitute the last line for the background-image for the Color Temp slider version (if you use it).

        card_mod:
          style:
            ha-slider$: |
              div.track::after {
                background: none; 
              }
              div.track::before {
                background: none;
              }
              div.track {
                background-image: linear-gradient(to right,red,yellow,green,cyan,blue,magenta,red);
                height: 10%;
                width: 80%;
                margin-left: 18px;
                margin-top: 18px;
              }

                background-image: linear-gradient(to right,rgb(100,180,255),rgb(255,255,255),rgb(255,136,13));

With some apologies for my late answer.
Thanks a lot for jumping into this matter. Yes I did had it working and use it (in Chrome and on android app).

I did a quick check, but did not manage to got it working? I will check on later when I can spent some more time on it…

(…)

With @GrizzlyAK’s hint I could not make it work as I would like to. Nevertheless with tweaking (and I don’t know whether I’m doing anything correct or wrong here (to noob for my own good)) in the Inspecion window I can manage to recreate the color gradient. In div.track::before. But I am not able (too short knowledge, I’m sorry) to get this back into the card-mod.

Hi, I haven’t tested it again since I reverted back until it gets sorted. It has been worked, and perhaps resolved completely. Also, I think Thomas may have added this gradient background natively in his slider-entity-row a while back. Please see this post for more information. It may help. I’ll probably upgrade soon and see how things go. Cheers.

only recently did I notice the slider you modded before doesnt work anymore, and getting back to this thread, discovered your post on the native setting…

however, doing

      - type: custom:slider-entity-row
        entity: light.dining_corner
        colorize: true
#         card_mod:
#           style:
#             ha-slider$ paper-progress$: |
#               div#progressContainer {
#                 background-image: linear-gradient(to right,red,yellow,green,cyan,blue,magenta,red);
#                 --paper-progress-active-color: none;
#               }

doesnt do anything… Just the regular slider.

this is a Hue color bulb supporting all features, so what am I missing?

or would we find another way of getting back those colorized sliders with card_mod after all?

Hi @Mariusthvdb, Please see an additional discussion about this with Thomas here. I have yet to upgrade to 2023.12 because of this (but will be soon) so I have not tried what he suggested to see if it works. If you do and find it works, please report back here for the benefit of others. I’ll do the same. Cheers.

do you mean in the repo? because I do think Ive read them all, also in this topic.

no more card_mod, use the native option is the final solution isnt it?

doesnt work in my cards for now, at least not on the lights I tried (the ones supporting color ofc, not the color_temp lights where colorizing seems pointless

Yeah, sadly, it seems so. I view it as a disappointing trend by those leading HA in moving us toward a product with lots of easily-managed superficial capabilities for the millions and fewer and fewer really good ones for those of us who’ve been here from the beginning. I know I’ve lost my enthusiasm and find myself skipping more and more “updates” as a result. I may move soon and am beginning to think I won’t even go to the trouble to automate the new home at this point, at least not to the current level, and perhaps not even with HA. I’ve spent thousands of dollars in switches, valves, thermostats, lights, etc. and many, many hours putting it all together here. It seems harder now to keep things working than it was learning YAML and config files and getting it all set up in the beginning. I still don’t use the UI’s automation editor - because you can’t comment your automations, for example. And that whole History thing. That loss of functionality, that I used daily, and the rather contemptuous response by those who made the change, really soured me.

I know… having a rainbow slider instead of a blue on doesn’t seem that big of a deal. It’s just part of a growing failure for me. We spend considerable time and effort building our home automation system that works for us, and it’s frustrating to watch it slowly crumble. I spent considerable time trying to figure out a workaround for this too. Perhaps the thousands of new HA users who can’t even spell “automate” will appreciate the improvement. But who knows, they’ll probably give up after they can’t get their first bulb to change colors (like Pdoff0808 and his 1-star rating on the Home Assistant “miracle” App on the Apple App store.) Are these the users those at Nabu Casa are now catering to? Hasn’t every other home automation outfit already done that and failed? Seems we’ve lost our way.

Just my view of things atm.

Hi everyone following this topic. I finally upgraded today to 2024.1.5 and, as expected, my color gradient sliders were gone. However, I implemented the changes I posted (see the post I replied to here) and IT WORKS (in case you haven’t already discovered this)! I have my RGB and Cool-Warm sliders back.

And they work on my iPhone as well, although these sliders are now very slightly longer than the normal ones (which I can live with). Someone might see if they can tweak things a bit to make them work on both, but I’m OK with not messing with it. :laughing:

Let me know if you find it doesn’t work.

I believe it would help if you posted a complete yaml of the working solution now, going back and then replacing lines is not very clear tbh.
this is still on the custom: slider-entity-row, or did you move to the core slider

btw are you sure there is no typo in that yaml ? seems an element is missing in the bottom line?

Could you by chance post the full update code and any of the edits to the YAML file? It would be really helpful

@Mariusthvdb @deprovision
Hey everyone, sorry, I did not see Marius’ reply back in Jan, but did see Jays. I am posting below the full YAML in my dashboard that generates the following ENTITIES card. It contains both the rgb color slider AND the Temp color (cool - warm) slider. The post I was referring to is #18 in this thread, Nov 23, that begins with “OK, so it looks like”. In that YAML, the last line is there to be used as a replacement for the same line in the immediately prior code to get the Temp slider instead of the RGB slider. The other code is identical, as you will see in the complete YAML block I post here. So, Marius is correct that it was bad YAML, but I left a NOTE: explaining it just above the YAML.

Here’s what it looks like:

and here’s the code:

type: vertical-stack
cards:
  - type: entities
    title: Warm
    entities:
      - type: custom:slider-entity-row
        entity: input_number.warm_lr_accent_hue_in
        name: Hue
        card_mod:
          style:
            ha-slider$: |
              div.track::after {
                background: none; 
              }
              div.track::before {
                background: none;
              }
              div.track {
                background-image: linear-gradient(to right,red,yellow,green,cyan,blue,magenta,red);
                height: 10%;
                width: 80%;
                margin-left: 18px;
                margin-top: 18px;
              }
      - type: custom:slider-entity-row
        entity: input_number.warm_lr_accent_saturation_in
        name: Saturation
      - type: custom:slider-entity-row
        entity: input_number.warm_lr_accent_brightness_in
        name: Brightness
      - type: custom:slider-entity-row
        entity: input_number.warm_lr_accent_color_temp_in
        name: Color Temp
        card_mod:
          style:
            ha-slider$: |
              div.track::after {
                background: none; 
              }
              div.track::before {
                background: none;
              }
              div.track {
                background-image: linear-gradient(to right,rgb(100,180,255),rgb(255,255,255),rgb(255,136,13));
                height: 10%;
                width: 80%;
                margin-left: 18px;
                margin-top: 18px;
              }
      - entity: input_boolean.enable_warm_color_temp_ib
        name: Use Color Temp
  - type: entities
    title: Cool
    entities:
      - type: custom:slider-entity-row
        entity: input_number.cool_lr_accent_hue_in
        name: Hue
        card_mod:
          style:
            ha-slider$: |
              div.track::after {
                background: none; 
              }
              div.track::before {
                background: none;
              }
              div.track {
                background-image: linear-gradient(to right,red,yellow,green,cyan,blue,magenta,red);
                height: 10%;
                width: 80%;
                margin-left: 18px;
                margin-top: 18px;
              }
      - type: custom:slider-entity-row
        entity: input_number.cool_lr_accent_saturation_in
        name: Saturation
      - type: custom:slider-entity-row
        entity: input_number.cool_lr_accent_brightness_in
        name: Brightness
      - type: custom:slider-entity-row
        entity: input_number.cool_lr_accent_color_temp_in
        name: Color Temp
        card_mod:
          style:
            ha-slider$: |
              div.track::after {
                background: none; 
              }
              div.track::before {
                background: none;
              }
              div.track {
                background-image: linear-gradient(to right,rgb(100,180,255),rgb(255,255,255),rgb(255,136,13));
                height: 10%;
                width: 80%;
                margin-left: 18px;
                margin-top: 18px;
              }
      - entity: input_boolean.enable_cool_color_temp_ib
        name: Use Color Temp

Oh, and this is still using the custom slider-entity-row. In my tests, I don’t believe what Thomas was referring to was the same things as what I’m doing here.

Let me know if you have any trouble. Cheers.

EDIT: and if you don’t like the color scheme of the sliders, feel free to put in any colors you want for any rainbow or temp slider. I believe someone earlier on this thread found more accurate colors and posted them.

color_temp:

hue_gradient:

looking for other mods that might interfere (dont believe I have those), or maybe theme settings on sliders…

No, nothing there and the result is equally strange

color_temp:

Hue gradient:

really odd this is.

(as you can see I did a quick test whether the toggle: true interfered, but that is not it)

btw the colorize: true option Thomas added and suggest in that issue, doesnt work in any pf my configs, did anyone get that to work, and can show a working config please?

      - type: custom:slider-entity-row
        toggle: true
        entity: light.feest_lampen # light group
        colorize: true
      - type: custom:slider-entity-row
        toggle: true
        entity: light.kayon # light entity
        colorize: true

simply does

which is, as you can see, exactly nothing…

OK, let’s try this. Here is my setup currently where the YAML above works:

HA Core: 2024.1.5
Supervisor: 2024.03.0
OS: 11.4
Frontend: 20240104.0
iOS HA App: 2024.2

Also, I’m using Version 17.3.0 of slider-entity-row.js, which you can find here, not the current one. I installed this back in November, and Thomas has made two changes since that time. Perhaps the new version doesn’t work. That is the only thing I can think of that would cause it to break.

For those who don’t know, at the URL above, click the Raw button to the right above the code, and then do a Ctrl-A on the resulting page to select all the code, Ctrl-C to copy it, and paste it into a text file named slider-entity-row.js in your /config/www directory on your Pi.

Also, IIRC, I think I determined that the “colorize” option in slider-entity-row wasn’t the RGB slider, but a solid color. I may be wrong, but I could never get it to work.

Hopefully that helps. If this works for you, let me know and we can ask Thomas to see if he can tell us why the new version doesn’t work.

Cheers

finally Ive found the syntax to get colorize to work, it needs the additional attribute…
I guess its always been in the documentation, reading that now with hindsight, I see what it means, and why it never caught my eye:

But, the result is super nice:

type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.kayon
    colorize: true
    full_row: true
    attribute: color_temp
  - type: custom:slider-entity-row
    entity: light.kayon
    colorize: true
    full_row: true
    attribute: hue
title: Slider entity row

its not in the documentation (at least not that I could find) but clicking the options in the UI editor and checking the yaml revealed it :wink:

no need to install older versions, just update all, and use the UI editor and select the correct attribute to colorize:

or above yaml

also working on light.groups :wink:

btw, attribute bightness is kind of cool too:

      - type: custom:slider-entity-row
        toggle: true
        entity: light.plafond_3_wand
        name: 3 Wall
        colorize: true
        attribute: brightness

so, definitely no more card_mod tinkering on slider-entity-row!
suppose this warrants the solution tick. I never suggest that for my own posts, but in this case, it was a revelation t myself :wink: and I hope I will fix the issue for others seeking the same

2 Likes

Woo Hoo! This is fabulous @Mariusthvdb! Thanks for working this out and posting it. I’ve marked it the SOLUTION. Maybe we can convince @thomasloven to add a few words to his readme.md to help users with these two features.

I’m going to make the change now and see how it goes. Will report back if I have any trouble. Otherwise, maybe we can put this thread to bed! :grin:

=============================

EDIT: OK, replacing the card_mod code with the option/attribute code didn’t work for me. I saw standard white sliders. So I figured maybe I needed the latest JS, so I installed it. Nah, that just broke the existing card_mod, giving me exactly what you were seeing before (see second group of sliders below). Then I thought maybe you can ONLY do this via the UI, so I went there and saw this:


That last colorize option at the bottom doesn’t even appear to me in the UI. Also, going into the code editor and entering it manually doesn’t fix it either (even with full length) as shown here:

The only thing left to do is update HA from my 2024.1.5 to 2024.3.1. Anybody know of any changes that would have made changes to this functionality?

Are you certain @Mariusthvdb that this was all you did? What version of HA are you on?