htmlmeter

How to display only RED and Green color depends on low set point using a HTML Meter element


Team,

Am using a Meter Element in HTML and wants to display only (Red and Green) Color depends on the value change. If the Value is < 20 then the Meter color will RED and if the Value > 20 then Meter color will Green. I have search lot of way but unsuccessful to do. Any idea is deeply appreciated.

<meter min="0" low="20" max="100" value="65"></meter> 


Solution

  • Check with

    meter::-webkit-meter-optimum-value {
      background: green;
    }
    
    meter::-webkit-meter-suboptimum-value {
      background: green;
    }
    
    meter::-webkit-meter-even-less-good-value  {
      background: red;
    }
    
    meter:-moz-meter-optimum::-moz-meter-bar {
      background: green;
    }
    
    meter:-moz-meter-sub-optimum::-moz-meter-bar {
      background: green;
    }
    
    meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
      background: red;
    }
    <meter min="0" max="100" low="20" high="75" optimum="100" value="19"></meter>
    <meter min="0" max="100" low="20" high="75" optimum="100" value="25"></meter>