JSFiddle - React, Tailwind, and code Playground

by djquery

HTML

<script src="https://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/excite-bike/jquery-ui.css">
<input type="range" title="Min Value" id="smin" value="0" max="100" data-attr="min" />
<input type="checkbox" title="disable min" data-attr="min" /><label for="smin">min 0</label><br />

<input type="range" title="Low Value" id="slow" value="25" max="100" data-attr="low" />
<input type="checkbox" title="disable low" data-attr="low" /><label for="slow">low 25</label><br />

<input type="range" title="Value" id="svalue" value="50" max="100" data-attr="value" />
<input type="checkbox" title="disable value" data-attr="value"/><label for="svalue">value 50</label><br />

<input type="range" title="Optimal Value" id="soptimum" value="50" max="100" data-attr="optimum" />
<input type="checkbox" title="disable optimum" data-attr="optimum"/><label for="soptimum">optimum 50</label><br />

<input type="range" title="High Value" id="shigh" value="75" max="100"data-attr="high"/>
<input type="checkbox" title="disable high"  data-attr="high"/><label for="shigh" for="sHigh">high 75</label><br />

<input type="range" title="Max Value" id="smax" min="0" value="100" max="100" data-attr="max"/>
<input type="checkbox" title="disable max" data-attr="max"/><label for="smax">max 100</label><br />

<meter min="0" low="25" value="50" optimim="50" high="75" max="100" title="Units"></meter>
<div class="meter" title="Units in Stock">
    <div class="min" title="min 0"></div>
    <div class="low" title="low 25"></div>
    <div class="value" title="value 50"></div>
    <div class="optimum" title="Optimum 50"></div>
    <div class="high" title="High 75"></div>
    <div class="max" title="Max 100"></div>
</div>

CSS

meter { width: 50%; }
input[type="range"] {width: 50%;}

.meter {
    position: relative;
    width: 50%;
    height: 1em;
    border: 1px solid black;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    background-color: silver;
}
.meter meter {
    display: none;
}
.meter>div {
    border-right: 2px solid black;
    bottom: 0px;
    display: inline;
    height: 1em;
    padding: 0 0 0 0;
    position: absolute;
    left: 0px;
    margin: 0 0 0 0;
    width: 0px;
    z-index: 1
}
.meter .value{
    background-color: green;    
    border-right: 0px solid black;
    top: 0px;
    width: 50%;
    z-index: 0
}
.meter .min{
    margin-left: 0%;
    
}
.meter .low{
    margin-left: 25%;
 }
.meter .optimum{
    margin-left: 50%;
}
.meter .high{
     margin-left: 75%;
}
.meter .max{
    margin-left: 100%
}

JavaScript

$('input[type="range"]').slider();

$m = $("meter");
$v = $("#values");
$d = $(".meter");
$("input[type='range']").change(function() {
    var $t = $(this), a = $t.data("attr");
    $m.attr(a, this.value);
    $("label[for='" + this.id + "']").text(a + " " + this.value);
    var adjust = (a === 'value')? "width" : "margin-left";
    $d.find("." + a).css(adjust, this.value + "%");
});

$("input:checkbox").click(function() {
    var $c = $(this);
    $d.find("." + $c.data('attr')).toggle()
    if (!this.checked) {
        $("#s" + $c.data("attr")).attr('disabled', 'disabled');
        $m.removeAttr($c.data("attr"));
    }
    else {
        $("#s" + $c.data("for")).removeAttr('disabled');
        $m.attr($c.data("attr"), $("#" + $c.data("for")).val());
        
    }
    console.log( $("#s" + $c.data("attr")));

});