HTML5 <meter> element – How to change meter value using JavaScript

← PrevNext →

The HTML5 <meter> element represents a scalar measurement in a given range or fractional value. Its like a gauge used to display readings of fuel level, disc space, or temperature etc. We can dynamically set or change the <meter> value. Here in this post I’ll show you how change meter value using JavaScript.

HTML5 meter tag example using JavaScript

Meter Syntax

<meter></meter>

Meter Element Explained

The <meter> element must have both the start and end tags. So, when you are defining it in your web page,

<meter>
    … some value here
</meter>

<meter> Attributes

The meter element has few attributes.

<meter id='temperature-meter' min='0' max='100' low='20' high='60' optimum='50' value='20'></meter>

• id – every element should have a unique id. So, this is common.

• min – indicates lower numeric bound in a given range. It should be less than the max value.

• max – indicates a higher numeric bound in a given range. It should be greater than the min value.

• low – it represents the upper numeric bound of the low end. It should be greater than the min value.

• high – it presents the lower numeric bound of the high end. This should be less than the max value.

• optimum – indicates the optimum value and should be within the range between min and max values.

This is how you should use the <meter> element in your web page.

<!DOCTYPE html>
<html>
<head>
  <style> 
    meter { 
      width: 300px;
      height: 50px;
    }
  </style>
</head>
<body>
  <p>
    <meter id='speed-meter' 
        min='0' max='140' low='20' high='80' optimum='50' 
        value='90'>

      Going at 90 Kmph
    </meter>
  </p>
</body>
</html>
Try it

See how it defines and changes the colour. Change the numeric value to see different colours.

Change <meter> value using JavaScript

Now let’s see how we can change the meter value dynamically using JavaScript. You can hook the meter with an input box (type text).

<!DOCTYPE html>
<html>
<head>
  <style> 
    meter { 
      width: 300px;
      height: 50px; 
    }
  </style>
</head>
<body>
  <p>
    <label for='speed'>Enter the speed: (like 10, 90, 130) </label>
    <input id='speed' type='text' /> 
  </p>
  
  <p>
    <meter id='speed-o-meter' 
        min='0' low='71' high='120' max='140'
        value='121'>

      going at 121 Kmph
    </meter>
  </p>
</body>
<script>
  let speed = document.getElementById('speed');
  
    speed.addEventListener ('input', function () {
        document.getElementById('speed-o-meter').value = this.value;
    });
</script>
</html>
Try it

Enter values like 10, 90 or 130 in the textbox and see the meter reading. You can extract data from an array or a JSON file to manipulate the <meter> value.

Display <meter> vertically using CSS

By default, the meter is displayed horizontally on a browser. However, you can display the meter element vertically using a little CSS.

There is a method to tilt an element using CSS. So, I gonna apply that method to the <meter> element. Check this out.

<!DOCTYPE html>
<html>
<head>
  <style> 
    meter {
      width: 150px;
      height: 150px;
      
/*   tilt the meter gauge */
      transform: rotate(-90deg);
      -ms-transform: rotate(-90*0deg);	 /*  for IE  */
    }
  </style>
</head>
<body>
  <p>
    <label for='battery'>Enter the value: </label>
    <input id='battery' type='text' /> 
  </p>
  
  <p>
    <meter id='battery-power' min='0' low='20' high='50' max='100' optimum='60'value='30'>
      30% left
    </meter>
  </p>
</body>
<script>
  let speed = document.getElementById('battery');
  
  speed.addEventListener ('input', function () {
    document.getElementById('battery-power').value = this.value;
  });
</script>
</html>
Try it

Simple isnt it. However remember, do not use the <meter> element to show progress of a process. Instead, use the <progress> element.

← PreviousNext →