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
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>
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)
|
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)
|
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.
|
Source code
- Date modified: