JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contenedorRango">
        <div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
        <div class="rango">
            <div class="bocadillo"></div>
            <div class="scrollbar">
                <div class="carril">
                    <input type="text" class="inputTextValue" value="1" data-min="1" data-max="15" data-step="1" data-inicia="0" />
                    <div class="barra"></div><div class="progreso"></div>
                </div>
            </div>
        </div>
    </div>



    <div class="contenedorRango">
        <div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
        <div class="rango">
            <div class="bocadillo"></div>
            <div class="scrollbar">
                <div class="carril">
                    <input type="text" class="inputTextValue" value="10" data-min="10" data-max="20" data-step="3" data-inicia="2" />
                    <div class="barra"></div><div class="progreso"></div>
                </div>
            </div>
        </div>
    </div>



    <div class="contenedorRango">
        <div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
        <div class="rango">
            <div class="bocadillo"></div>
            <div class="scrollbar">
                <div class="carril">
                    <input type="text" class="inputTextValue" value="0" data-min="0" data-max="30" data-step="1" data-inicia="1" />
                    <div class="barra"></div><div class="progreso"></div>
                </div>
            </div>
        </div>
    </div>



    <div class="contenedorRango">
        <div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
        <div class="rango">
            <div class="bocadillo"></div>
            <div class="scrollbar">
                <div class="carril">
                    <input type="text" class="inputTextValue" value="2"...

CSS

* {
    margin: 0;
    border: none;
    position: relative;
}



body {
    width: 100%;
    height: 100%;
    font-size: 100%;
}



div.contenedorRango {
    width: 40%; /* el ancho del range con respecto a su elemento padre */
    margin: 2.75em auto;
    padding: 0 2em;
    background-color: rgb(224, 224, 224);
    border: .1em solid rgb(221, 20, 20);
}



div.contenedorRango > div.valorRango {
    width: 0;
    height: 1.55em;
    left: 0;
}



div.contenedorRango > div.valorRango > span.minimo {
    float: left;
    left: 0;
    font: bold .9em Verdana;
    color: rgb(68, 68, 62);
}



div.contenedorRango > div.valorRango > span.maximo {
    float: right;
    right: 0;
    font: bold .9em Verdana;
    color: rgb(68, 68, 62);
}



div.contenedorRango > div.rango {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
}



div.contenedorRango > div.rango > div.bocadillo {
    width: 2.7em;
    height: auto;
    left: 1.5em; /*19px;*/
    top: 0; 
    margin-bottom: .5em;
    background-color: rgb(191, 191, 199);
    font: bold 80% Verdana;
    color: rgb(68, 68, 62);
    border-radius: .2em;
    border: 0.1em solid rgb(158, 158, 158);
    text-align: center;
    z-index: 2;
}



div.contenedorRango > div.rango > div.bocadillo:after {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -9px;
    left: 50%;
    display: block;
    content: "";
    margin-left: -3px;
    overflow: hidden;
    border: 4px solid rgba(0, 0, 0, 0);
    border-top-color: rgb(158, 158, 158);
}



div.contenedorRango > div.rango > div.scrollbar {
    width: 100%;
    height: .75em;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril {
    width: 100%;
    height: .6em;
    top: 10%;
    background-color: rgb(80, 69, 71);
    border-radius: 1em;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > input.inputTextValue {
    display: none;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > div.barra {
    width: 2.45em;
   ...

JavaScript

lib = {

    Evento : function(elemento, nomevento, fnc) {

        elemento.addEventListener(nomevento, fnc, false);
    },



    EventoEliminar : function(elemento, nomevento, fnc) {

        elemento.removeEventListener(nomevento, fnc, false);
    },



    cssComputado : function(obj, styleProp) {

        if (obj == null) { return 0; }

        var valor = window.getComputedStyle(obj, null)[styleProp];

        return valor;
    },



    EventoCancelar : function(evt) {

        evt.preventDefault();
    },



    EventoParar : function(evt) { 

        evt.stopPropagation();
    }

}



var Range = {

    reglaVisible : true, // boleano --> true / false
    min : [],
    max : [],
    step : [],
    inicia : [],
    barW : 0,
    trackW : 0,
    posInicialBocadillo : 0,
    nuevoMin : [],
    valorBocata : [],
    valorProgreso : 0,
    desplazamiento : 0,
    desplazamientoBoca : 0,
    barraLeft : 0,
    barraProgreso : null,
    bocata : null,
    dividirCarril : [],
    anchoCarril : [],
    offset1 : {}, 
    offset2 : {},
    ofset : 0,
    fooDrag : function() {},


    initRange : function() {

        Range.barW = parseInt(lib.cssComputado(document.querySelector('.barra'), 'width'));
        Range.trackW = parseInt(lib.cssComputado(document.querySelector('.carril'), 'width')),
        Range.posInicialBocadillo = parseInt(lib.cssComputado(document.querySelector('.bocadillo'), 'left'));

        Array.prototype.forEach.call(document.querySelectorAll('.contenedorRango'), function(rango, i) {

            Range.min.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-min'), 10));
            Range.max.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-max'), 10));
            Range.step.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-step'), 10));
            Range.inicia.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-inicia'), 10));

           ...