# meter-polyfill

> Polyfill for the meter element

Latest version **1.7.3** (published 2017-10-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install meter-polyfill
pnpm add meter-polyfill
yarn add meter-polyfill
bun add meter-polyfill
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.3 |
| Published | 2017-10-03 |
| First published | 2016-11-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | fisker Cheung |
| Maintainers | fisker |
| Keywords | meter, html, html5, polyfill |

## Links

- npm: https://www.npmjs.com/package/meter-polyfill
- Repository: https://github.com/fisker/meter-polyfill
- Issues: https://github.com/fisker/meter-polyfill/issues
- npm.io page: https://npm.io/package/meter-polyfill

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.7.3 (latest) — 2017-10-03
- 1.7.2 — 2017-02-13
- 1.7.1 — 2017-01-22
- 1.6.1 — 2016-11-22
- 1.6.0 — 2016-11-20
- 1.5.1 — 2016-11-20
- 1.5.0 — 2016-11-19
- 1.4.2 — 2016-11-19
- 1.4.1 — 2016-11-19
- 1.3.3 — 2016-11-19
- 1.3.2 — 2016-11-19
- 1.3.1 — 2016-11-19

## README

# meter-polyfill
>
Polyfill for the meter element

[![npm](https://img.shields.io/npm/v/meter-polyfill.svg?style=flat-square)](https://www.npmjs.com/package/meter-polyfill) 
[![npm](https://img.shields.io/npm/l/meter-polyfill.svg?style=flat-square)](https://www.npmjs.com/package/meter-polyfill)

### NPM
```
npm install --save meter-polyfill
````

### Bower
```
bower install --save meter-polyfill
````

## test

https://fisker.github.io/meter-polyfill/test/meter/meter.html

for browsers supports `meter`, use `fmeter` to test

https://fisker.github.io/meter-polyfill/test/fmeter/meter.html

## api
```javascript
meterPolyfill(); // document contains meter
meterPolyfill(document.getElementById('container')); // dom contains meter
meterPolyfill(document.getElementsByTagName('div')); // domlist contains meter
meterPolyfill(meter); // meter
meterPolyfill(document.getElementsByTagName('meter')); // meters
meterPolyfill([meter1,meter2])// arrays
meterPolyfill([div1,div2])// arrays

meterPolyfill.version // version number
meterPolyfill.CLASSES // class list of value element
meterPolyfill.LEVEL_SUBOPTIMUM // LEVEL_SUBOPTIMUM;
meterPolyfill.LEVEL_OPTIMUM // LEVEL_OPTIMUM;
meterPolyfill.LEVEL_SUBSUBOPTIMUM // LEVEL_SUBSUBOPTIMUM;
meterPolyfill.calc // calculate meter/propValue

var calcResult = meterPolyfill.calc(meter); // meter
var calcResult = meterPolyfill.calc(propValues); // Object propValues
calcResult[min/max/low/high/optimum/value] // for browsers not support getters
calcResult.percentage // value width percentage(0-100)
calcResult.level // value level 
calcResult.className // value className

```

## usage

```html
<link rel="stylesheet" href="https://unpkg.com/meter-polyfill/dist/meter-polyfill.min.css">
<script src="https://unpkg.com/meter-polyfill/dist/meter-polyfill.min.js"></script>
<script>
console.log(meterPolyfill);
</script>
```

amd loader
```html
<link rel="stylesheet" href="https://unpkg.com/meter-polyfill/dist/meter-polyfill.min.css">
<script src="require.min.js"></script>
<script>
require(['https://unpkg.com/meter-polyfill/dist/meter-polyfill.min.js'], function(meterPolyfill) {
  console.log(meterPolyfill);
});
</script>
```

## known issue(s): 

1. minify version does works on ie < 9

   use `meter-polyfill.js` instead. until uglifyjs fix this bug

2. currently firefox shows diffently from chrome

3. old IEs
  1. ie <= 8 
    problem: accessing properties get attribute value
    solution: use meterPolyfill.calc(meter)[prop] instead
  2. ie <= 7
    problem: meter.labels is not live
    solution: currently no solution supplied

4. innerHTML created Meter is not polyfilled imidiately. 
   1. call `meterPolyfill(parentNode)` manually.
   2. render to the dom tree, it will be polyfilled.

5. list functions returns diffently from native, and there is no plan to change.
  1. Function.prototype.toString.call(HTMLMeterElement)
  2. meter.toString()
  3. Object.prototype.toString.call(meter)

---
_Source: https://npm.io/package/meter-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._