<meter> element settings

index.html

<main>
    <h1>&lt;meter&gt; element settings</h1>
    <h3><a target="_blank" href="https://stackoverflow.com/questions/44939391/what-exactly-do-the-low-high-and-optimum-attributes-do-in-the-meter-element">What exactly do the low, high and optimum attributes do?</a></h3>

    <label>Thresholds (<code>low</code>/<code>high</code>) & <code>optimum</code>:</label>
    <div class="slider" id="sl1">
        <div class="thumb" data-icon="▿" data-point="down" data-prop="low"></div>
        <div class="thumb" data-icon="▿" data-point="down" data-prop="high"></div>
        <div class="thumb" data-icon="★" data-point="down" data-prop="optimum" style="color:orange;"></div>
    </div>
    
    <meter id="test" min="0" max="100" ></meter>

    <div class="slider" id="sl2">
        <div class="thumb" data-icon="123" data-point="up" data-prop="value"></div>
    </div>
    
    <code id="output"></code>
</main>

meter-element-settings.markdown

element settings

https://stackoverflow.com/questions/44939391/what-exactly-do-the-low-high-and-optimum-attributes-do-in-the-meter-element

A Pen by Andreas Borgen on CodePen.

License.

script.babel

(function() {
    "use strict";
    console.clear();
    
    function clampVal(x, min, max) {
        return Math.max(min, Math.min(x, max));
    }

    function printVal(x) {
        return x.toFixed(1);
    }

    const _meter = document.getElementById('test'),
          _out   = document.getElementById('output'),
          _serializer = new XMLSerializer(),
          _state = {
              low: 50,
              high: 83,
              optimum: 100,
              value: 63,
          };

    function syncMeter() {
        const s = _state,
              m = _meter;
        
        m.low     = printVal(Math.min(s.low, s.high));
        m.high    = printVal(Math.max(s.low, s.high));
        m.optimum = printVal(s.optimum);
        m.value   = printVal(s.value);
        
        for(let p in s) {
            document.querySelector(`[data-prop="${p}"]`).style.left = s[p] + '%';
        }
        
        _out.textContent = _serializer.serializeToString(m)
                                      .replace(/(xmlns|id)=\S+\s/g, '');
    }
    
    function dragHandler(thumb, pos) {
        const x = pos[0] + thumb.offsetWidth * .7071,
              xRel = x / thumb.offsetParent.clientWidth,
              xPct = xRel * 100;

        _state[thumb.dataset['prop']] = clampVal(xPct, 0, 100);
        syncMeter();
    }
    dragTracker({
        container: document.querySelector('#sl1'),
        selector: '.thumb',
        //dragOutside: false,
        callback: dragHandler,
    });
    dragTracker({
        container: document.querySelector('#sl2'),
        selector: '.thumb',
        //dragOutside: false,
        callback: dragHandler,
    });
    syncMeter();
})();

scripts

<script src="https://unpkg.com/drag-tracker@1"></script>

style.css

body {
    font-family: Georgia, sans-serif;
}
main {
    width: 80%;
    max-width: 800px;
    margin: auto;
}

label {
    display: block;
    margin: 1em 0;
}

pre {
    font-size: 1.3em;
    background: #eee;
    padding: .5em;
    margin-top: 2em;
}

#test {
    width: 100%;
    height: 3em;
}

style.scss

body {
    font-family: Georgia, sans-serif;

    main {
        width: 80%;
        max-width: 800px;
        margin: auto;
    }

    label {
        text-decoration: underline;
    }

    code {
        display: inline-block;
        font-size: 1.3em;
        background: #eee;
        padding: .1em .3em;
    }
}

#output {
    margin-top: 2em;
    padding: .5em;
    white-space: nowrap;
}

#test {
    width: 100%;
    height: 3em;
    margin: .2em 0;
}

.slider {
    position: relative;
    height: 3.5em;
}
.thumb {
    position: absolute;
    display: block;
    width:  2.5em;
    height: 2.5em;

    //background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='370' viewBox='45,0, 310,370'%3E %3Cg fill='none' stroke='black' stroke-width='6'%3E %3Cpath d='M200,6 C90,90 30,170 60,260 C110,395 290,395 340,260 C370,170 310,90 200,6Z' stroke='ime'%3E%3C/path%3E %3Ccircle cx='200' cy='215' r='120' /%3E %3C/g%3E %3C/svg%3E") center/contain no-repeat;
    box-sizing: border-box;
    border: 1px solid #888;
    border-radius: 100%;

    background: dodgerblue;
    cursor: ew-resize;

    &::before {
        content: attr(data-icon);
        display: block;
        position: absolute;
        top: 10%; left: 10%;
        width: 80%;
        height: 80%;

        box-sizing: border-box;
        border: 1px solid #888;
        border-radius: 100%;

        background: white;
        text-align: center;
        font-size: 2em;
        line-height: .8;
    }
    
    &[data-point="down"] {
        bottom: 0;
        border-radius: 100% 100% 100% 0;
        transform-origin: 0 100%;
        transform: rotate(-45deg);
        &::before {
            transform: rotate(45deg);
        }
    }
    &[data-point="up"] {
        top: 0;
        border-radius: 0 100% 100% 100%;
        transform-origin: 0 0;
        transform: rotate(45deg);
        &::before {
            transform: rotate(-45deg);
        }
    }
}

.thumb[data-prop="value"] {
    background: lawngreen;
    &::before {
        font-size: 1em;
        line-height: 1.8;
    }
    &::after {
        content: 'value';
        position: absolute;
        top: 1.4em; left: .6em;
        transform: rotate(-45deg);

        font-size: 1.3em;
        background: #eee;
        padding: .1em .3em;
    }
}