JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div id="slider"></div>

CSS

#slider {
    background: #31d9ff;
    cursor: pointer;
    position: absolute;
    right: 44px;
    top: 34px;
    height: 6px;
    width: 100px;
}
/**************/
 .noUi-base {
    width:100%;
    height:100%;
    position:relative
}
.noUi-origin {
    position:absolute;
    right:0;
    top:0;
    left:0;
    bottom:0
}
.noUi-handle {
    position:relative;
    z-index:1
}
.noUi-stacking .noUi-handle {
    z-index:10
}
.noUi-state-tap .noUi-origin {
    -webkit-transition:left .3s, top .3s;
    transition:left .3s, top .3s
}
.noUi-state-drag * {
    cursor:inherit!important
}
.noUi-base {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
}
.noUi-horizontal .noUi-handle {
    width: 11px;
    height: 11px;
    left: -6px;
    top: -4px;
}
.noUi-vertical .noUi-handle {
    width:28px;
    height:34px;
    left:-6px;
    top:-17px
}
.noUi-background {
    background:#1a2e35;
}
.noUi-dragable {
    cursor:w-resize
}
.noUi-handle {
    border: 1px solid #108CA8;
    border-radius: 6px;
    background: #FFFFFF;
    cursor: pointer;
}
.noUi-active {
}
.noUi-handle:after {
    border-radius: 3px;
    content:"";
    display: block;
    position: absolute;
    height: 5px;
    width: 5px;
    background: #1A2E35;
    border: 1px solid #108CA8;
    left: 2px;
    top: 2px;
}

JavaScript

/*! noUiSlider - 7.0.10 - 2014-12-27 14:50:47 */

! function (a) {
    "use strict";

    function b(a, b) {
        return Math.round(a / b) * b
    }

    function c(a) {
        return "number" == typeof a && !isNaN(a) && isFinite(a)
    }

    function d(a) {
        var b = Math.pow(10, 7);
        return Number((Math.round(a * b) / b).toFixed(7))
    }

    function e(a, b, c) {
        a.addClass(b), setTimeout(function () {
            a.removeClass(b)
        }, c)
    }

    function f(a) {
        return Math.max(Math.min(a, 100), 0)
    }

    function g(b) {
        return a.isArray(b) ? b : [b]
    }

    function h(a) {
        var b = a.split(".");
        return b.length > 1 ? b[1].length : 0
    }

    function i(a, b) {
        return 100 / (b - a)
    }

    function j(a, b) {
        return 100 * b / (a[1] - a[0])
    }

    function k(a, b) {
        return j(a, a[0] < 0 ? b + Math.abs(a[0]) : b - a[0])
    }

    function l(a, b) {
        return b * (a[1] - a[0]) / 100 + a[0]
    }

    function m(a, b) {
        for (var c = 1; a >= b[c];) c += 1;
        return c
    }

    function n(a, b, c) {
        if (c >= a.slice(-1)[0]) return 100;
        var d, e, f, g, h = m(c, a);
        return d = a[h - 1], e = a[h], f = b[h - 1], g = b[h], f + k([d, e], c) / i(f, g)
    }

    function o(a, b, c) {
        if (c >= 100) return a.slice(-1)[0];
        var d, e, f, g, h = m(c, b);
        return d = a[h - 1], e = a[h], f = b[h - 1], g = b[h], l([d, e], (c - f) * i(f, g))
    }

    function p(a, c, d, e) {
        if (100 === e) return e;
        var f, g, h = m(e, a);
        return d ? (f = a[h - 1], g = a[h], e - f > (g - f) / 2 ? g : f) : c[h - 1] ? a[h - 1] + b(e - a[h - 1], c[h - 1]) : e
    }

    function q(a, b, d) {
        var e;
        if ("number" == typeof b && (b = [b]), "[object Array]" !== Object.prototype.toString.call(b)) throw new Error("noUiSlider: 'range' contains invalid value.");
        if (e = "min" === a ? 0 :...