JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<div id="slider"></div>
<br>
<div id="onhandleslide_info"></div>
<br>
<div id="onhandlemouseenter_info"></div>
<br>

CSS

.ui-slider-horizontal .ui-slider-range {
    background-color: #97ce00;
}
.ui-slider-control-plus, .ui-slider-control-minus {
    width: 26px;
    height: 26px;
    position: absolute;
    z-index: 99;
    margin: -7px 0 0 -13px;
    border: 1px solid #d3d3d3;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    background: #97ce00;
    line-height:26px;
    top: -20px;
}
.ui-slider-control-plus:after, .ui-slider-control-minus:after {
    position:absolute;
    width:26px;
    height:26px;
    color:#fff;
    text-align:center;
    right:1px;
    top:-2px;
    line-height:26px;
    font-size:26px;
}
.ui-slider-control-plus:after {
    content:"+";
}
.ui-slider-control-minus:after {
    content:"-";
}
.ui-slider-control-minus, .ui-slider-control-plus, .ui-slider-handle {
    cursor: pointer;
}
.ui-slider-handle.arrow-left, .ui-slider-handle.arrow-right {
    width: 0;
    height: 0;
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
}
.ui-slider-handle.arrow-left {
    margin-left: -16px;
    border-top: 0.8em solid transparent;
    border-bottom: 0.8em solid transparent;
    border-right: 0.8em solid #e6e6e6;
}
.ui-slider-handle.arrow-right {
    margin-left: 0px;
    border-top: 0.8em solid transparent;
    border-bottom: 0.8em solid transparent;
    border-left: 0.8em solid #e6e6e6;
}

JavaScript

/**
 * Intervals
 * @author Artem Platonov
 * @description Extends jquery-ui slider widget to include multiple ranges within a single slider
 * @example At jsFiddle http://jsfiddle.net/ladrower/BmQq4/
 * @link https://github.com/ladrower/jquery-ui-intervals
 */

(function(w, $) {
    $.widget("ui.intervals", $.ui.slider, {
        _create: function() {
            this._super();
        },
        _mouseCapture: function(event) {
            if ($(event.target).is('a.ui-slider-handle')) {
                this._lastChangedValue = $(event.target.parentNode).find('.ui-slider-handle').index(event.target);
            }
            return this._super(event);
        }
    });

    /**
     * @class Intervals
     *
     * @constructor
     * @param {String} selector jQuery selector
     * @param {Object} userOptions (optional) Custom options object that overrides default
     * {
     *      @property {Number} userOptions.min Slider minimum value
     *      @property {Number} userOptions.max Slider maximum value
     *      @property {Number} userOptions.step Slider sliding step
     *      @property {Number} userOptions.gap Minimum gap between handles when add/remove range controls are visible
     *      @property {Number} userOptions.newlength Default length for newly created range. Will be adjusted between surrounding handles if not fitted
     *      @property {Boolean} userOptions.disabled Slider disability flag
     * }
     */
    w.Intervals = function(selector, userOptions) {
        var _self = this;
        var _slider;
        var _options = {
            min: 0,
            max: 100,
            step: 1,
            gap: 5,
            newlength: 10,
            disabled: false
        };
        var _delete_period_confirm = null,
            _add_period_confirm = null,
            _on_handle_mouseenter = null,
            _on_before_handle_slide = null,
            _on_handle_slide = null;

        var SELECTORS = {
            range: { 'class':...