JSFiddle - React, Tailwind, and code Playground

HTML

<div id="range-slider"></div>
<p id="results"></p>

CSS

.range-slider-track {
    height: 20px;
}

.range-slider-track:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: black;
}

.range-slider-track .dragger {
    display: block;
    width: 10px;
    height: inherit;
    position: relative;
    background-color: red;
}

JavaScript

function rangeSlider(elem, config) {

    var html = document.documentElement,
        range = document.createElement('div'),
        dragger = document.createElement('span'),
        down = false,
        rangeWidth, rangeOffset, draggerWidth, cachePosition;

    var defaults = {
        min: 20,
        max: 150,
        value: 0, // set default value on initiation from `0` to `100` (percentage based)
        vertical: false, // vertical or horizontal?
        rangeClass: "", // add extra custom class for the range slider track
        draggerClass: "", // add extra custom class for the range slider dragger
        drag: function(v) { /* console.log(v); */ } // function to return the range slider value into something
    };

    for (var i in defaults) {
        if (typeof config[i] == "undefined") config[i] = defaults[i];
    }

    function addEventTo(el, ev, fn) {
        if (el.addEventListener) {
            el.addEventListener(ev, fn, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + ev, fn);
        } else {
            el['on' + ev] = fn;
        }
    }

    var isVertical = config.vertical;

    elem.className = (elem.className + ' range-slider ' + (isVertical ? 'range-slider-vertical' : 'range-slider-horizontal')).replace(/^ +/, "");
    range.className = ('range-slider-track ' + config.rangeClass).replace(/ +$/, "");
    dragger.className = ('dragger ' + config.draggerClass).replace(/ +$/, "");

    addEventTo(range, "mousedown", function(e) {
        html.className = (html.className + ' no-select').replace(/^ +/, "");
        rangeWidth = range[!isVertical ? 'offsetWidth' : 'offsetHeight'];
        rangeOffset = range[!isVertical ? 'offsetLeft' : 'offsetTop'];
        draggerWidth = dragger[!isVertical ? 'offsetWidth' : 'offsetHeight'];
        down = true;
        updateDragger(e);
        return false;
    });

    addEventTo(document, "mousemove", function(e) {
        updateDragger(e);
    });

   ...