Custom icon colors outside 0-100 range not working

[GeoffWy]

First off - great card and very useful, but I am having trouble using the card to display LQI over the range 0-250. I am setting color steps as:

colors:
  steps:
    - color: '#ff0000'
      value: 0
    - color: '#aa5500'
      value: 85
    - color: '#55aa00'
      value: 170
    - color: '#00ff00'
      value: 255
  gradient: true

This should set colors ranging from red at 0 to green at 255, but the resulting output sets all values above 100 to the default color. I had understood the fix to this problem was supposed to allocate over the whole range.

Full card code for reference:

type: custom:battery-state-card
title: LQI
secondary_info: '{last_changed}'
icon: mdi:eye
filter:
  include:
    - name: entity_id
      value: sensor.*lqi*
unit: ' '
sort:
  by: state
collapse: 12
bulk_rename:
  - from: LQI
value_override: '{state|equals(unavailable,0)}'
colors:
  steps:
    - color: '#ff0000'
      value: 0
    - color: '#aa5500'
      value: 85
    - color: '#55aa00'
      value: 170
    - color: '#00ff00'
      value: 255
  gradient: true

Originally posted by @maxwroc in #599 (comment)

[wilrino]

Hi,
I’m also experiencing the same issue where the icons are not colored when the threshold is set above 100.
It seems that the plugin might have been designed to work with values between 0 and 100, like to battery percentages.
However, it would be great to extend its functionality to support wider ranges of values. This would make this amazing plugin even more versatile!

Thanks for considering this improvement.

Matteo

[wilrino]

I also try to use thresholds function, like this example "{state|thresholds(22,89,200,450)}" but I don't able to use. I don't find any example over the web.

[wilrino]

For now I use this solution with template-entity-row and card_mod

I haven't found a solution to avoid repeating all the code that manages the icon color for each entity

type: entities
entities:
  - type: custom:template-entity-row
    entity: sensor.shellyem_generale_channel_1_power
    name: Generale
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: 
          {% if states('sensor.shellyem_generale_channel_1_power') | float > 1000 %} red;
          {% elif states('sensor.shellyem_generale_channel_1_power') | float > 200 %} orange;
          {% elif states('sensor.shellyem_generale_channel_1_power') | float > 5 %} green;
          {% else %} gray;
          {% endif %};
        }
  - type: custom:template-entity-row
    entity: sensor.shellyem_generale_channel_2_power
    name: Cucina
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: 
          {% if states('sensor.shellyem_generale_channel_2_power') | float > 1000 %} red;
          {% elif states('sensor.shellyem_generale_channel_2_power') | float > 200 %} orange;
          {% elif states('sensor.shellyem_generale_channel_2_power') | float > 5 %} green;
          {% else %} gray;
          {% endif %};
        }
      
  - type: custom:template-entity-row
    entity: sensor.smart_plug_bimby_power
    name: Bimby
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: 
          {% if states('sensor.smart_plug_bimby_power') | float > 1000 %} red;
          {% elif states('sensor.smart_plug_bimby_power') | float > 200 %} orange;
          {% elif states('sensor.smart_plug_bimby_power') | float > 5 %} green;
          {% else %} gray;
          {% endif %};
        }
   
  - type: custom:template-entity-row
    entity: sensor.presa_tuya_zigbee_power
    name: Lavatrice
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: 
          {% if states('sensor.presa_tuya_zigbee_power') | float > 1000 %} red;
          {% elif states('sensor.presa_tuya_zigbee_power') | float > 200 %} orange;
          {% elif states('sensor.presa_tuya_zigbee_power') | float > 5 %} green;
          {% else %} gray;
          {% endif %};
        }
   
  - type: custom:template-entity-row
    entity: sensor.presa_frigo_nuovo_power
    name: Frigorifero
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: 
          {% if states('sensor.presa_frigo_nuovo_power') | float > 1000 %} red;
          {% elif states('sensor.presa_frigo_nuovo_power') | float > 200 %} orange;
          {% elif states('sensor.presa_frigo_nuovo_power') | float > 5 %} green;
          {% else %} gray;
          {% endif %};
        }
  - type: custom:template-entity-row
    entity: sensor.shelly_pm_caldaia_power
    name: Caldaia
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: 
          {% if states('sensor.shelly_pm_caldaia_power') | float > 1000 %} red;
          {% elif states('sensor.shelly_pm_caldaia_power') | float > 200 %} orange;
          {% elif states('sensor.shelly_pm_caldaia_power') | float > 5 %} green;
          {% else %} gray;
          {% endif %};
        }
  - type: custom:template-entity-row
    entity: sensor.clima_potenza_ist
    name: Climatizzatore
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: 
          {% if states('sensor.clima_potenza_ist') | float > 1000 %} red;
          {% elif states('sensor.clima_potenza_ist') | float > 200 %} orange;
          {% elif states('sensor.clima_potenza_ist') | float > 5 %} green;
          {% else %} gray;
          {% endif %};
        }
  - type: custom:template-entity-row
    entity: sensor.smartplug_luci_power
    name: Luci trave
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: 
          {% if states('sensor.smartplug_luci_power') | float > 1000 %} red;
          {% elif states('sensor.smartplug_luci_power') | float > 200 %} orange;
          {% elif states('sensor.smartplug_luci_power') | float > 5 %} green;
          {% else %} gray;
          {% endif %};
        }