- Skip to main content
- Skip to "About this site"

# Meter polyfill

- Documentation
- Questions or comments?

## Purpose

The HTML5 `meter` element displays a scalar measurement within a known range. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.

### Description that is included in HTML5

> The `meter` element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

> This is also known as a gauge.

> The `meter` element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate `progress` element.

> The `meter` element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.

## Examples

Description | Min | Low | Value | Max | High | Result
--- | --- | --- | --- | --- | --- | ---
Normal (75%) | 20 | n/a | 65 | 80 | n/a | 75% (normal)
Too high (90%) | 0 | n/a | 90 | 100 | 80 | 90% (too high)
Too low (15%) | 100 | 120 | 115 | 200 | 180 | 15% (too low)
|  | 150

View code

### HTML

    <table class="table table-striped">
    	<thead>
    		<tr>
    			<th scope="col">Description</th>
    			<th scope="col">Min</th>
    			<th scope="col">Low</th>
    			<th scope="col">Value</th>
    			<th scope="col">Max</th>
    			<th scope="col">High</th>
    			<th scope="col">Result</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Normal (75%)</td>
    			<td>20</td>
    			<td>n/a</td>
    			<td>65</td>
    			<td>80</td>
    			<td>n/a</td>
    			<td><meter min="20" value="65" max="80">75% (normal)</meter></td>
    		</tr>
    		<tr>
    			<td>Too high (90%)</td>
    			<td>0</td>
    			<td>n/a</td>
    			<td>90</td>
    			<td>100</td>
    			<td>80</td>
    			<td><meter min="0" value="90" max="100" high="80">90% (too high)</meter></td>
    		</tr>
    		<tr>
    			<td>Too low (15%)</td>
    			<td>100</td>
    			<td>120</td>
    			<td>115</td>
    			<td>200</td>
    			<td>180</td>
    			<td><meter min="100" low="120" value="115" max="200" high="180">15% (too low)</meter></td>
    		</tr>
    		<tr>
    			<td colspan="3"><button class="btn btn-default" id="decreaseMeter" type="button">Decrease</button></td>
    			<td colspan="3"><button class="btn btn-default" id="increaseMeter" type="button">Increase</button></td>
    			<td><meter id="updateTest" min="100" low="120" value="150" max="200" high="180"><span class="wb-inv">150</span></meter>
    		</tr>
    	</tbody>
    </table>

### JavaScript (demo only)

    (function( $, wb ) {
    "use strict";

    $( document ).on( "click vclick", "#increaseMeter, #decreaseMeter", function( event ) {
    	var $elm = $( "#updateTest" ),
    		increase = event.currentTarget.id === "increaseMeter",
    		valuenow = parseInt( $elm.attr( "value" ), 10 ),
    		limit = parseInt( $elm.attr( increase ? "max" : "min" ), 10 ),
    		change = increase ? 1 : -1,
    		newValue = valuenow === limit ? 0 : valuenow + change;

    	$elm
    		.attr( "value", newValue )
    		.find( "span" )
    			.text( newValue );

    	// Update the visuals
    	$elm.trigger( "wb-update.wb-meter" );
    });

    })( jQuery, wb );

Date modified:
  2014-02-19