JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>

<body>

    <div id="b-slider-1" class="b-slider"></div><div><input id="sl1_value" type="text" value="" /></div>
    <div id="b-slider-2" class="b-slider"></div><div><input id="sl2_value" type="text" value="" /></div>
    <div id="b-slider-3" class="b-slider"></div><div><input id="sl3_value" type="text" value="" /></div>
    <div id="b-slider-4" class="b-slider"></div><div><input id="sl4_value" type="text" value="" /></div>

    <script type="text/javascript">
        slider(document.getElementById("b-slider-1"), 10, 2, 1, function (slider){document.getElementById("sl1_value").value=slider.value;});
        slider(document.getElementById("b-slider-2"), 3, 1, 0, function(slider){document.getElementById("sl2_value").value=slider.value;});
        slider(document.getElementById("b-slider-3"), 1000, 0, 0, function(slider){document.getElementById("sl3_value").value=slider.value;});
        slider(document.getElementById("b-slider-4"), 20, 0, 5, function(slider){document.getElementById("sl4_value").value=slider.value;});
    </script>

</body>
</html>

CSS

body{padding:0 0 0 100px;}
.b-slider {
    border:1px solid #000;
    width:400px;
    height:40px;
}
    .b-slider .b-slider_wrap {
        height:100%;
        position:relative;
    }
        .b-slider .runner {
            border-left:20px solid transparent;
            border-right:20px solid transparent;
            border-top:40px solid green;
            cursor:pointer;
            position:absolute;
            left:0;
            top:0;
            z-index:3;
        }
        .b-slider .dead_left {
            background:red;
            height:100%;
            position:absolute;
            left:0;
            top:0;
            z:index:2;
        }
        .b-slider .dead_right {
            background:red;
            height:100%;
            position:absolute;
            right:0;
            top:0;
            z-index:2;
        }

JavaScript

function slider(slider_node, count, dead_left, dead_right, on_change) {
    var sl_c = document.createElement('DIV');
    sl_c.className = "b-slider_wrap";
    sl_c.innerHTML = "<div class='dead_left'></div><div class='dead_right'></div><div class='runner'></div>";
    slider_node.appendChild(sl_c);
    
    var html = document.documentElement,
        r_node = slider_node.getElementsByTagName("*")[3],
        sl = {rw : r_node.offsetWidth, pw : r_node.parentNode.offsetWidth, offsetleft : 0, value : dead_left};

    sl.step = sl.pw / count;
    var element = r_node.parentNode;
    do {sl.offsetleft += element.offsetLeft;} while (element = element.offsetParent);
    sl.bl = sl.offsetleft + dead_left*sl.step;
    sl.br = sl.offsetleft + sl.pw - dead_right*sl.step;
    
    slider_node.getElementsByTagName("*")[1].style.width = dead_left*sl.step + "px";
    slider_node.getElementsByTagName("*")[2].style.width = dead_right*sl.step + "px";
    r_node.style.left = sl.value*sl.step - sl.rw/2 + "px";
    if (on_change) {on_change(sl);}

    r_node.onmousedown = function(e) {
        e = e || window.event;

        if ("\v"=="v") {e.returnValue = false; html.style.cursor = r_node.currentStyle.cursor;}
        else {e.preventDefault(); html.style.cursor = window.getComputedStyle(r_node, null).cursor;}

        html.onmousemove = function(e) {
            e = e || window.event;

            if (e.pageX == null && e.clientX != null)
                {
                    var body = document.body;
                    e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
                }

            sl.value = e.pageX > sl.br ? count-dead_right : (e.pageX < sl.bl ? dead_left : Math.round((e.pageX-sl.offsetleft)/sl.step));
            r_node.style.left = sl.value*sl.step - sl.rw/2 + "px";
            if (on_change) {on_change(sl);}
        };

        html.onmouseup = function() {
            html.onmousemove = null;
        ...