JSFiddle - React, Tailwind, and code Playground

by djquery

HTML

<script src="https://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js"></script>
<input type="range" title="Min Value" id="sMin" value="0" max="100" data-attr="min" />
<label for="sMin">Min value</label><br />
<input type="range" title="Max Value" id="sMax" value="100" max="100" data-attr="max"/>
<label for="sMax">Max value</label><br />
<input type="range" title="Optimal Value" id="sOptimal" value="25" max="100" data-attr="optimal" />
<label for="sOptimal">Optimal value</label><br />
<input type="range" title="High Value" id="sHigh" value="75" max="100" data-attr="high"/>
<label for="sHigh">High value</label><br />
<input type="range" title="Value" id="sValue" value="50" max="100" data-attr="value"/>
<label for="sValue">Value</label><br /><meter min="0" max="100" value="25" high="24"></meter>

CSS

meter { width: 80%; }

JavaScript

$m = $("meter");
$v = $("#values");
console.log($v);
$("input[type='range']").change(function() {
    var t = $(this);
    $m.attr($(this).data("attr"), this.value);
    $("label[for='" + this.id + "']").text(t.data("attr") + " " + this.value);
});