CodePen

HTML

            
              <h1>html5 meter element</h1>

<meter id="meter" value=".5" max="1" max="0" high=".75" low=".25"></meter>

<p>Note:- Edit the code below for fun! to tweak the meter gauge above.</p>
<div class="live-code">
  &lt;meter max=<input id="max" value="1.0" maxlength="3"> min=<input id="min" value="0.0" maxlength="3"> value=<input id="value" value="0.5" maxlength="3"> high=<input id="high" value=".75" maxlength="3"> low=<input id="low" value=".25" maxlength="3"> optimum=<input id="optimum" value="0.5" maxlength="3">&gt;&lt;/meter&gt;
</div>



<dl>
  <dt>
    Case 1 - No attributes
    <xmp><meter></meter></xmp>
  </dt>
  <dd><meter></meter></dd>
  
  <dt>
    Case 2 - value < max (default: min=0, max=1)
    <xmp><meter value=".5"></meter></xmp>
  </dt>
  <dd><meter value=".5"></meter></dd>
  
  <dt>
    Case 3 - value = max (default: min=0, max=1)
    <xmp><meter value="1"></meter></xmp>
  </dt>
  <dd><meter value="1"></meter></dd>
  
  <dt>
    Case 4 - value > max (default: min=0, max=1)
    <xmp><meter value="5"></meter></xmp>
  </dt>
  <dd><meter value="5"></meter> <span>(if value > max then value = max)</span></dd>
  
  <dt>
    Case 5 - value < min (default: min=0, max=1)
    <xmp><meter value="-.5"></meter></xmp>
  </dt>
  <dd><meter value="-.5"></meter> <span>(if value < min then value = min)</span></dd>
  
  <dt>
    Case 6 - value = min (default: min=0, max=1)
    <xmp><meter value="0"></meter></xmp>
  </dt>
  <dd><meter value="0"></meter></dd>
  
  <dt>
    Case 7 - value > min (default: min=0, max=1)
    <xmp><meter value=".5"></meter></xmp>
  </dt>
  <dd><meter value=".5"></meter></dd>

  <dt>
    Case 8 - value < high (default: min=0, max=1)
    <xmp><meter value=".5" high=".8"></meter></xmp>
  </dt>
  <dd><meter value=".5" high=".8"></meter></dd>
  
  <dt>
    Case 9 - value = high (default: min=0, max=1)
    <xmp><meter value=".8" high=".8"></meter></xmp>
  </dt>
  <dd><meter value=".8" high=".8"></meter></dd>
  
  <dt>
    Case 10 - value > high (default: min=0, max=1)
    <xmp><meter value=".9" high=".8"></meter></xmp>
  </dt>
  <dd>
    <meter value=".9" high=".8"></meter>
    <span>(if value > high then notice how the color changes)</span>
  </dd>
  
  <dt>
    Case 11 - value < low (default: min=0, max=1)
    <xmp><meter value=".15" low=".25"></meter></xmp>
  </dt>
  <dd>
    <meter value=".15" low=".25"></meter>
    <span>(if value < low then notice how the color changes)</span>
  </dd>
  
  <dt>
    Case 12 - value = low (default: min=0, max=1)
    <xmp><meter value=".25" low=".25"></meter></xmp>
  </dt>
  <dd><meter value=".25" low=".25"></meter></dd>
  
  <dt>
    Case 13 - value > low (default: min=0, max=1)
    <xmp><meter value=".5" low=".25"></meter></xmp>
  </dt>
  <dd>
    <meter value=".5" low=".25"></meter>
  </dd>
  
    <dt>
    Case 14 - optimum < low < high (default: min=0, max=1)
    <xmp><meter low=".25" optimum=".15" high=".75" value=".5"></meter></xmp>
  </dt>
  <dd>
    <meter low=".25" optimum=".15" high=".75" value=".5"></meter>
    <span>(if optimum < low then notice how the color changes)</span>
  </dd>
  
 <dt>
    Case 15 - low < optimum < high (default: min=0, max=1)
    <xmp><meter low=".25" optimum=".5" high=".75" value=".5"></meter></xmp>
  </dt>
  <dd>
    <meter low=".25" optimum=".5" high=".75" value=".5"></meter>
  </dd>

  <dt>
    Case 16 - low < high < optimum (default: min=0, max=1)
    <xmp><meter low=".25" optimum=".85" high=".75" value=".5"></meter></xmp>
  </dt>
  <dd>
    <meter low=".25" optimum=".85" high=".75" value=".5"></meter>
    <span>(if optimum > high then notice how the color changes)</span>
  </dd>
  
    <dt>
    Case 17 - value < low < high < optimum (default: min=0, max=1)
    <xmp><meter low=".25" optimum=".8" high=".75" value=".2"></meter></xmp>
  </dt>
  <dd>
    <meter low=".25" optimum=".8" high=".75" value=".2"></meter>
    <span>(if value < low and optimum > high then notice how the color changes)</span>
  </dd>

      <dt>
    Case 18 - value > high > low > optimum (default: min=0, max=1)
    <xmp><meter low=".25" optimum=".2" high=".75" value=".8"></meter></xmp>
  </dt>
  <dd>
    <meter low=".25" optimum=".2" high=".75" value=".8"></meter>
    <span>(if value > high and optimum < low then notice how the color changes)</span>
  </dd>

</dl>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  
  font-family: Monaco, serif;
  font-size: 100%;
  margin: 0 auto;
  max-width: 1000px;
}

dl, dd {
  
  margin: 0 0 2.5em;
}

xmp { 
  
  background: #ff8;
  border: 1px dotted #888;
  font: 100%/1.75 Consolas, Monaco, monospace;
  
  word-spacing: 0;
  letter-spacing: 0;
  
  padding: .5em; 
}

h1 {
  
  border-bottom: 1px solid #ccc;
  padding-bottom: .5em;
  margin-bottom: 2.5em;
}

span {
  
  color: #c00;
  font-size: 100%;
}

#meter {
  
  margin: 0 auto 4.5em;
  width: 450px;
  height: 50px;
  display: block;
}

.live-code {
  
  margin: 1em auto 3.5em;
  dispay: block;
  font-size: 1.25em;
  padding: .5em;
  background-color: #ddd;
  text-align: center;
}

input {
  
  border: none;
  background-color: #ddd;
  border-bottom: 1px dotted #333;
  width: 35px;
  line-height: 1.5;
  font-size: 1em;
  color: #c00;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function(){
  
  $('#max').on('input', function() {
    $('#meter').prop('max', $('#max').val())
  });
  
  $('#min').on('input', function() {
    $('#meter').prop('min', $('#min').val())
  });
  
  $('#value').on('input', function() {
    $('#meter').prop('value', $('#value').val())
  });
  
  $('#high').on('input', function() {
    $('#meter').prop('high', $('#high').val())
  });
  
  $('#low').on('input', function() {
    $('#meter').prop('low', $('#low').val())
  });
  
  $('#optimum').on('input', function() {
    $('#meter').prop('optimum', $('#optimum').val())
  });
  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................