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>
    <style type="text/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;
                }
    </style>
</head>

<body>

    <div id="b-slider-1" class="b-slider">
        <div class="b-slider_wrap">
            <div class="dead_left"></div>
            <div class="dead_right"></div>
            <div class="runner"></div>
        </div>
    </div>
    <div><input id="sl1_value" type="text" value="" /></div>

    <div id="b-slider-2" class="b-slider">
        <div class="b-slider_wrap">
            <div class="dead_left"></div>
            <div class="dead_right"></div>
            <div class="runner"></div>
        </div>
    </div>
    <div><input...

JavaScript

if(document.getElementsByClassName) {

    getElementsByClass = function(classList, node) {
        return (node || document).getElementsByClassName(classList)
    }

} else {

    getElementsByClass = function(classList, node) {
        var node = node || document,
        list = node.getElementsByTagName('*'),
        length = list.length,
        classArray = classList.split(/\s+/),
        classes = classArray.length,
        result = [], i,j
        for(i = 0; i < length; i++) {
            for(j = 0; j < classes; j++)  {
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i])
                    break
                }
            }
        }

        return result
    }
}


function slider(slider_node, count, dead_left, dead_right, on_change) {
    var html = document.documentElement,
        r = {};

    r.node = getElementsByClass("runner", slider_node)[0];
    r.step_count = count;
    r.deadLeft = dead_left;
    r.deadRight = dead_right;
    r.w = r.node.offsetWidth;
    r.pw = r.node.parentNode.offsetWidth;
    r.step = r.pw / r.step_count;
    getElementsByClass("dead_left", slider_node)[0].style.width = r.deadLeft*r.step + "px";
    getElementsByClass("dead_right", slider_node)[0].style.width = r.deadRight*r.step + "px";
    r.l = offsetX(r.node.parentNode);
    r.bl = r.l + r.deadLeft*r.step;
    r.br = r.l + r.pw - r.deadRight*r.step;
    r.value = r.deadLeft;
    r.pos = r.value*r.step - r.w/2;
    r.node.style.left = r.pos + "px";
    if (on_change) {on_change(r);}

    r.node.onmousedown = function(e) {
        e = e || window.event;
        if (e.preventDefault) {e.preventDefault();} else {e.returnValue = false;}

        if ("\v"=="v") {html.style.cursor = r.node.currentStyle.cursor;}
        else if (window.getComputedStyle(r.node, null).cursor) {html.style.cursor = window.getComputedStyle(r.node, null).cursor;}

        html.onmousemove = function(e) {
            e = e ||...