JSFiddle - React, Tailwind, and code Playground

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

HTML

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

CSS

.noUi-target, .noUi-target * {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -ms-touch-action:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.noUi-target {
    position:relative;
    direction:ltr
}
.noUi-base {
    width:100%;
    height:100%;
    position:relative;
    z-index:1
}
.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 {
    height:18px
}
.noUi-horizontal .noUi-handle {
    width:34px;
    height:28px;
    left:-17px;
    top:-6px
}
.noUi-vertical {
    width:18px
}
.noUi-vertical .noUi-handle {
    width:28px;
    height:34px;
    left:-6px;
    top:-17px
}
.noUi-background {
    background:#FAFAFA;
    box-shadow:inset 0 1px 1px #f0f0f0
}
.noUi-connect {
    background:#3FB8AF;
    box-shadow:inset 0 0 3px rgba(51, 51, 51, .45);
    -webkit-transition:background 450ms;
    transition:background 450ms
}
.noUi-origin {
    border-radius:2px
}
.noUi-target {
    border-radius:4px;
    border:1px solid #D3D3D3;
    box-shadow:inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB
}
.noUi-target.noUi-connect {
    box-shadow:inset 0 0 3px rgba(51, 51, 51, .45), 0 3px 6px -5px #BBB
}
.noUi-dragable {
    cursor:w-resize
}
.noUi-vertical .noUi-dragable {
    cursor:n-resize
}
.noUi-handle {
    border:1px solid #D9D9D9;
    border-radius:3px;
    background:#FFF;
    cursor:default;
    box-shadow:inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB
}
.noUi-active {
    box-shadow:inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px...

JavaScript

/*! nouislider - 8.0.2 - 2015-07-06 13:22:09 */

!function(a){if("function"==typeof define&&define.amd)define([],a);else if("object"==typeof exports){var b=require("fs");module.exports=a(),module.exports.css=function(){return b.readFileSync(__dirname+"/nouislider.min.css","utf8")}}else window.noUiSlider=a()}(function(){"use strict";function a(a){return a.filter(function(a){return this[a]?!1:this[a]=!0},{})}function b(a,b){return Math.round(a/b)*b}function c(a){var b=a.getBoundingClientRect(),c=a.ownerDocument,d=c.defaultView||c.parentWindow,e=c.documentElement,f=d.pageXOffset;return/webkit.*Chrome.*Mobile/i.test(navigator.userAgent)&&(f=0),{top:b.top+d.pageYOffset-e.clientTop,left:b.left+f-e.clientLeft}}function d(a){return"number"==typeof a&&!isNaN(a)&&isFinite(a)}function e(a){var b=Math.pow(10,7);return Number((Math.round(a*b)/b).toFixed(7))}function f(a,b,c){j(a,b),setTimeout(function(){k(a,b)},c)}function g(a){return Math.max(Math.min(a,100),0)}function h(a){return Array.isArray(a)?a:[a]}function i(a){var b=a.split(".");return b.length>1?b[1].length:0}function j(a,b){a.classList?a.classList.add(b):a.className+=" "+b}function k(a,b){a.classList?a.classList.remove(b):a.className=a.className.replace(new RegExp("(^|\\b)"+b.split(" ").join("|")+"(\\b|$)","gi")," ")}function l(a,b){a.classList?a.classList.contains(b):new RegExp("(^| )"+b+"( |$)","gi").test(a.className)}function m(a,b){return 100/(b-a)}function n(a,b){return 100*b/(a[1]-a[0])}function o(a,b){return n(a,a[0]<0?b+Math.abs(a[0]):b-a[0])}function p(a,b){return b*(a[1]-a[0])/100+a[0]}function q(a,b){for(var c=1;a>=b[c];)c+=1;return c}function r(a,b,c){if(c>=a.slice(-1)[0])return 100;var d,e,f,g,h=q(c,a);return d=a[h-1],e=a[h],f=b[h-1],g=b[h],f+o([d,e],c)/m(f,g)}function s(a,b,c){if(c>=100)return a.slice(-1)[0];var d,e,f,g,h=q(c,b);return d=a[h-1],e=a[h],f=b[h-1],g=b[h],p([d,e],(c-f)*m(f,g))}function t(a,c,d,e){if(100===e)return e;var f,g,h=q(e,a);return...