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

# Meter polyfill

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.

## Use when

- Displaying a scalar measurement within a known range

## Do not use when

- Displaying the progress of a task

## Working example

### Normal

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

### Too high

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

### Too low

    <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

Event | Trigger | What it does
--- | --- | ---
`wb-init.wb-meter` | Triggered manually (e.g., `$( "meter" ).trigger( "wb-init.wb-meter" );`). | Used to manually initialize the `meter` polyfill. Note: The `meter` polyfill will be initialized automatically unless the `meter` element is added after the page has already loaded.
`wb-update.wb-meter` | Triggered manually (e.g., `$( "meter" ).trigger( "wb-update.wb-meter" );`). | Used to manually update the `meter` polyfill.
`wb-ready.wb-meter` (v4.0.5+) | Triggered automatically after the `meter` polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native `meter` support. | Used to identify where the `meter` polyfill initialized (target of the event)
    $( document ).on( "wb-ready.wb-meter", "meter", function( event ) {
    });
    $( "meter" ).on( "wb-ready.wb-meter", function( event ) {
    });
`wb-updated.wb-meter` (v4.0.5+) | Triggered automatically after the `meter` polyfill is updated. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native `meter` support. | Used to identify where the `meter` polyfill initialized (target of the event)
    $( document ).on( "wb-updated.wb-meter", "meter", function( event ) {
    });
    $( "meter" ).on( "wb-updated.wb-meter", function( event ) {
    });
`wb-ready.wb` (v4.0.5+) | Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
    $( document ).on( "wb-ready.wb", function( event ) {
    });

## Source code

Meter polyfill source code on GitHub

Date modified:
  2014-08-04