Meter polyfill

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

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">Decrease</button></td>
			<td colspan="3"><button class="btn btn-default" id="increaseMeter">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: