Meter polyfill

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.

Use when

• Displaying a scalar measurement within a known range

Do not use when

• Displaying the progress of a task

Working example

<meter min="20" value="65" max="80">75% (normal)</meter>

<meter min="0" value="90" max="100" high="80">90% (too high)</meter>

<meter min="100" low="120" value="115" max="200" high="180">15% (too low)</meter>

• English examples
• French examples

How to implement

To use the polyfill, a standard progress element must be used. In cases where a browser doesn't support the progress element, the polyfill is automatically loaded.

Configuration options

Configuration options available for the meter element (HTML5 specification)

Events

$( document ).on( "wb-ready.wb-meter", "meter", function( event ) {
});

$( "meter" ).on( "wb-ready.wb-meter", function( event ) {
});

$( document ).on( "wb-updated.wb-meter", "meter", function( event ) {
});

$( "meter" ).on( "wb-updated.wb-meter", function( event ) {
});

$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Meter polyfill source code on GitHub