Hue Slider

I would LOVE to have the following:

and playing around in FF Dev Tools I found that if I added the following to the #progressContainer ID, I could produce the above hue slider:

background-image: linear-gradient(to right,red,yellow,green,aqua,blue,fuchsia,red);
--paper-progress-active-color: none;

The first line just creates the correct fill to match the hue values created in the light component color wheel (on a slider with min: 0 max: 255), and the second line turns off the blue ‘progress’ fill of the slider that covers up the gradient.

You don’t have templates in your slider card and don’t have sliders in your entity row card. Is this something that could be added pretty easily? Not sure how often this hui CSS would change and break.

Do you have any ideas on how we might do this otherwise in the UI, e.g., to define CSS for an element on the fly? It would be like the styles options in custom-button cards.

[GrizzlyAK]

Sure.

  - type: entities
    title: Living Room Accent Lighting
    entities:
      - entity: input_number.lr_accent_hue_in
        name: Hue
        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;
                
              }
      - entity: input_number.lr_accent_saturation_in
        name: Saturation
      - entity: input_number.lr_accent_brightness_in
        name: Brightness

You can read more about what I did here.

[thomasloven]

Yes. I love this, and it is on my list. I’ve actually kept this in an open browser tab for moths waiting for a chance to take it on: https://community.home-assistant.io/t/lovelace-custom-hue-slider/369839/3