HTML - optimum Attribute

HTML optimum attribute is used to specifies the range where the gauge value is considered to be an optimal value.

This attribute must be within the range (as defined by the min attribute and max attribute). For instance, if you're creating a meter to show CPU temperature, you might set min to 30, max to 100, and optimum to 60. This visually shows that temperatures around 60 degrees Celsius are considered ideal

The browser will change the color of the meter bar depending on whether the value is less than or equal to the optimum value.

Syntax

<meter optimum="value"></meter>

Where value is a floating-point number that represents the optimal value of the gauge.

Applies On

Below listed elements allow using of the HTML optimum attribute

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

Examples of HTML optimum Attribute

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

Optimum value across high and low values

In the following example, we will notice color change of meter bar for various optimum values.

<!DOCTYPE html>
<html>
<body>
   <h2> HTML optimum attribute </h2>
   <p>optimum value below low and high:
   <meter value="0.6" 
          max="0.9" 
          min="0.1"
          optimum="0.1" 
          high="0.5" 
          low="0.2">
   </meter>
   </p>
   <p>optimum value between low and high:
   <meter value="0.6" 
          max="0.9" 
          min="0.1"
          optimum="0.3" 
          high="0.5" 
          low="0.2">
   </meter>
   </p>

   <p>optimum value above low and high:
   <meter value="0.6" 
         max="0.9" 
         min="0.1"
         optimum="0.7" 
         high="0.5" 
         low="0.2">
   </meter>
   </p>
</body>
</html>

Manipulating value of meter Element based on optimum Value.

Considering the another scenario, where we are going to run the script the along with the optimum attribute. Here user can dynamically decrease 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
optimum	Yes 8.0	No	Yes 6.0	Yes 6.0	Yes 11.0

html_attributes_reference.htm