HTML - low Attribute

HTML low attribute is used mention a value which is consider as lower than the value of the meter element. It displayed differently when value exceed lower limit.

It is the upper numerical limit of the lower end of the measured range. The value of the lower attribute must be greater than the minimum value (that is, the min attribute) and less than the higher value and the maximum value (that is, high attribute, max attribute).

If it is not used within the <meter> tag or less than the minimum value, then the low attribute value will be equal to the minimum value.

Syntax

<meter low= "value"></meter>

Applies On

Below listed elements allow using of the HTML low attribute

Element	Description
<meter>	HTML <low> tag is used to render data within the given range.

Examples of HTML low Attribute

Below examples will illustrate the HTML low attribute, where and how we should use this attribute!

Define low value in meter tag

In the following example, we will create a meter element and set low value less than min value.

<!DOCTYPE html>
<html lang="en">
<body>
      <h3>HTML low Attribute</h3>
      <label for="server-load">
         Room 1: Server Load
      </label> 
      <meter id="server-load" 
             value="40" 
             min="0" 
             max="100" 
             low="50" 
             high="90" 
             optimum="0.5">
      </meter>
</body>

</html>

Color of meter tag depends on low and value attributes

Considering the another scenario, Here we are using low attribute with meter tag. In the output if the value of 'value' attribute is between high and low, then result bar will be green.

<!DOCTYPE html>
<html lang="en">

<body>
   <h3>HTML low Attribute</h3>
   <label for="server-load">
      Room 1: Server Load
   </label> 
   <meter id="server-load" 
            value="0.7" 
            min="0" 
            max="1" 
            low="0.3" 
            high="0.8">
   </meter>
   <br>
   <label for="server-load">
      Room 2: Server Load
   </label> 
   <meter id="server-load" 
            value="0.9" 
            min="0" 
            max="1" 
            low="0.3" 
            high="0.8" >
   </meter>
   <br>
   <label for="server-load">
      Room 3: Server Load
   </label> 
   <meter id="server-load" 
            value="0.2" 
            min="0" 
            max="1" 
            low="0.3" 
            high="0.8">
   </meter>
</body>

</html>

Manipulating value of meter Element based on low Value.

Considering the another scenario, where we are going to run the script the along with the low attribute. Here user can dynamically increase value to meet target.

<!DOCTYPE html>
<html lang="en">

<body>
   <p>Example of the 'low' attribute</p>
   <fieldset>
      <legend>Meter-high</legend> 
      <label for="">Rahul's Work Load</label> 
      <meter high="70" 
             low="30" 
             min="0" 
             max="100" 
             value="75" 
             id='rahul'>
      </meter>
      <br><br>
      <span id='res'>
         Above Average Workload
      </span>
      <br><br> 
      <button onclick="decrease()">
            Reduce Tasks
      </button>
   </fieldset>
   <script>
      function decrease() {
         var h = document.getElementById('rahul');
         var work = h.value;
         h.value = h.value - 10;
         var res = document.getElementById('res');
         res.innerHTML = 
         "Rahul's workload has decreased from "
         + work + " to " + h.value;
      }
   </script>
</body>

</html>

Supported Browsers

Attribute
low	Yes 8.0	No	Yes 6.0	Yes 6.0	Yes 11.0

html_attributes_reference.htm