JSFiddle - React, Tailwind, and code Playground

by Paul Irish

HTML

<!DOCTYPE html>

<html>
<head>
    <title>Meter</title>
    <meta charset="utf-8" />
    <style>
        @import url('meter-polyfill.css');
    </style>
    <script type="text/javascript" src="meter-polyfill.js"></script>
</head>
<body>
<dl>
<dt>Normal</dt>
<dd><meter min="0.6" value="4.89" max="5.09"></meter></dd>
<dt>Too High</dt>
<dd><meter min="0" high="8" value="9" max="10"></meter></dd>
<dt>Too Low</dt>
<dd><meter min="0" low="3" value="2" max="10"></meter></dd>
<dt>Optimal</dt>
<dd><meter min="0" value="5" max="10"></meter></dd>
<dt>Text value in meter node</dt>
<dd><meter min="0" value="5" max="10">Cooties</meter></dd>

<dt>High greater than Max</dt>
<dd><meter min="0" value="5" max="10"></meter></dd>
<dt>Low greater than Min</dt>
<dd><meter min="0" high="8" value="9" max="10"></meter></dd>

<dt>Value greater than Max</dt>
<dd><meter min="4" value="11" max="10"></meter></dd>
<dt>Value lesser than Min</dt>
<dd><meter min="4" value="0" max="10"></meter></dd>
</dl>

</body>
</html>

CSS

meter{
    display: block;
    border: 1px outset;
    height: 20px;
    width: 100px;
    overflow: hidden;
}
meter div
{
    display: block;
    border-right:1px solid #000;
    height: 20px;
    background: #b4e391; /* old browsers */
    background: -moz-linear-gradient(top, #b4e391 0%, #44AA00 35%, #b4e391 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(35%,#44AA00), color-stop(100%,#b4e391)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* ie */
}
.meterValueTooHigh div, .meterValueTooLow div{
    background: #ffd65e; /* old browsers */
    background: -moz-linear-gradient(top, #ffd65e 0%, #FBFF47 35%, #febf04 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(35%,#FBFF47), color-stop(100%,#febf04)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* ie */
}
.meterIsMaxed
{
    border-right: 0px none !important;
}

JavaScript

// from https://gist.github.com/667320


// hack for backwards compatibility
document.createElement('meter');
// create polyfill
function makeMeter(meterElement) {
    // parse values and attributes
    function attr(attributeName, defaultValue) {
        return meterElement.getAttribute(attributeName) != null ?
                            meterElement.getAttribute(attributeName) :
                            (defaultValue ? defaultValue : null);
    }
    function addClass(classStr) {
        var classes = meterElement.className.split(' ');
        if (classes.length == 0) {
            meterElement.className = classStr;
            return;
        }
        for (classStrVal in classes) {
            if (classStr == classStrVal) { return; }
        }
        classes.push(classStr);
        meterElement.className = classes.join(' ');
    }
    function removeClass(classStr) {
        var classes = meterElement.className.split(' ');
        var i = classes.length;
        while (i--) {
            if (classes[i] == classStr) {
                classes.splice(i, 1);
                break;
            }
        }
        meterElement.className = classes.join(' ');
    }

    function getFormParent() {
        var element = meterElement;
        while (element.parent && element.parent.tagName.toLowerCase() != 'form') {
            element = element.parent;
        }
        if (element.tagName.toLowerCase() == 'form') {
            return element;
        }
        return null;
    }

    function getFormLabels() {
        var id = meterElement.id;
        if (id == null || this.form == null) {
            return null;
        }
        var elementsLabels = [];
        // otherwise loop through the form's child label elements 
        // looking for the element that has a for="{this.id}"
        var labels = this.form.getElementsByTagName('label');
        for (label in labels) {
            if (label['for'] == id) {
                elementsLabels.push(label);
       ...