How do we set what value is the optimal value for the gauge in HTML?


In this article we are going to learn about how do we set what value is the optimal value for the gauge in HTML.

The optimal value is used to show the range of meters. The value must fall between the minimum and maximum of the range. It is used to specify the scale measurement with a frictional value over a well-defined range. It also goes by the name "gauge."

Syntax

Following is the syntax for meter.

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

Note − It only contains a floating number to represent the ideal value of the gauge.

Let’s look into the following examples to get better understanding on how do we set what value is the optimal value for the gauge in HTML.

Example 1

In the following example we are using the optimum to create the ideal value for the gauge.

<!DOCTYPE html>
<html>
<body>
   <h1>METER GAUGE</h1>
   <meter value="0.7"
      max="2"
      min="0.4"
      optimum="0.6"
      high="0.5"
      low="0.2">
   </meter>
</body>
</html>

On executing the above script, it will generate an output consisting of a meter gauge with the ideal value "0.6" set by using optimum.

Example 2

Considering the following example where we are using the optical value for the gauge.

<!DOCTYPE html>
<html>
<body>
   <h2 style="color:#BB8FCE;">HTML Optimum Attribute</h2>
   <p>optimum value above LOW and HIGH:
      <meter value="0.6" max="0.9" min="0.1"
         optimum="0.6" high="0.5" low="0.2">
      </meter>
   </p>
   <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.4" high="0.5" low="0.2">
      </meter>
   </p>
</body>
</html>

When the script gets executed, it will generate an output consisting of all the metre gauge entries with optimum values, displaying the different situations of optimum values when they are higher than low and high values, lower than low and high values, or between low and high values on the webpage.

Updated on: 15-Dec-2022

93 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements