Lovelace: Custom Hue Slider

Hmm… That’s an interesting approach. You’ve eliminated the need to press a button. Although you could potentially miss a trigger if you change things too quickly with different sliders if your network is sluggish. Adding a mode: queued to your automation would remedy that, tho, I think.

I’ve also added a button that sets the custom sliders to whatever values the current light group has at the time. This way, I can use the built-in color wheel or color temperature popup to play with hue, saturation, brightness, and once I get it where I want it, I can press this button and the sliders are all set to those values, and can be read off for easy reference (something you can’t do with the color-wheel, unless you look at the state in Dev Tools), or use with the Custom button. That script is here and works whether you use the color-wheel or the color temp option in the built-in color popup:

  # Set Custom Input to Current Color
  set_custom_input_to_current_color_scr:
    alias: Set Custom Input to Current Color (SCR)
    mode: single
    sequence:
      - service: input_number.set_value
        entity_id: input_number.lr_accent_hue_in
        data:
          value: "{{ states.light.hue_lr_lights_lgrp.attributes.hs_color[0] | int }}"
      - service: input_number.set_value
        entity_id: input_number.lr_accent_saturation_in
        data:
          value: "{{ states.light.hue_lr_lights_lgrp.attributes.hs_color[1] | int }}"
      - service: input_number.set_value
        entity_id: input_number.lr_accent_brightness_in
        data:
          value: "{{ ((states.light.hue_lr_lights_lgrp.attributes.brightness)*100/255) | int }}"
      - choose:
          conditions: "{{ state_attr('light.hue_lr_lights_lgrp','color_temp') != None }}"
          sequence:
            - service: input_number.set_value
              entity_id: input_number.lr_accent_color_temp_in
              data:
                value: "{{ states.light.hue_lr_lights_lgrp.attributes.color_temp | int }}"
            - service: homeassistant.turn_on
              entity_id: input_boolean.enable_color_temp_ib
        default:
          - service: homeassistant.turn_off
            entity_id: input_boolean.enable_color_temp_ib

Thank you @GrizzlyAK , very interesting idea. I haven’t encountered any issues yet, but as soon as I see this happening I already know where to look! :ok_hand:

Very minor observation: For the colour temperature, at least for my Phillips Hue white ambiance lights, the gradient Home Assistant uses in its UI (when you long-tap the light) was slightly different to yours. I took your idea but used the same colours as Home Assistant does:

background-image: linear-gradient(to right,rgb(166,209,255),rgb(255,255,255),rgb(255,160,0));

The difference is subtle


vs

(yours is the top one; it’s slightly more blue at the start of the range and slightly more orange at the end of the range)

1 Like

Nice! I was eyeballing it, but I will go back and add your values to my setup. Thanks!

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.