HTML Meter Element

The element gives you a semantic, accessible, browser‑native gauge for values within a known range — something like disk usage, battery level, progress toward a quota, rating, or health bar.

<!doctype html>
<html lang="en">
   <title>Meter Demo</title>
   <script>
      function update() {
      const meter = document.querySelector("meter")
      let x = document.getElementById('box1').value;
      meter.value = x
      }
   </script>
   <style>
      .page {width:50%;margin:auto;}
   </style>
   </head>
   <body>
      <div class='page'>
         <h1>HTML Meter Element</h1>
         <label>Resource Utilization</label>
         <meter min="0" max="100" value="65"></meter>
         <p>
            <input type='text'id='box1' value='10'></input><br>
            <button onclick='update()'>Update</button><br>
         </p>
         <p>Meter value can be dynamically updated.</p>
      </div>
   </body>
</html>

When NOT to use <meter>

Get Sonny Smith’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Use <progress> instead when:

• The max value is unknown
• You’re showing progress toward completion of a task

Use <meter> when:

• You know the min/max
• You’re showing a measurement, not progress