JSFiddle - React, Tailwind, and code Playground

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

HTML

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

CSS

.xdsoft_range2dslider, .xdsoft_range2dslider * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
}
.xdsoft_noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.xdsoft_range2dslider {
    position:relative;
}
.xdsoft_range2dslider.xdsoft_range2dslider_disabled {
    opacity:0.7;
}
.xdsoft_range2dslider_box {
    border:1px solid #ccc;
    height:100px;
    width:auto;
    position:relative;
    cursor:pointer;
}
.xdsoft_range2dslider_runner {
    width:16px;
    height:16px;
    position:absolute;
    cursor:pointer;
    z-index:5;
    background:#fff;
    background:rgba(255, 255, 255, 0.9);
    border:1px solid #ccc;
    border-radius:50%;
}
.xdsoft_range2dslider_runner input {
    color:transparent !important;
    background:transparent !important;
    border:0px solid transparent !important;
    outline:0px transparent !important;
    width:1px !important;
    height:1px !important;
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}
.xdsoft_range2dslider_runner:hover {
    z-index:6;
}
.xdsoft_range2dslider_box.xdsoft_range2dslider_box_top .xdsoft_range2dslider_runner {
    margin-top:-8px;
}
.xdsoft_range2dslider_box.xdsoft_range2dslider_box_left .xdsoft_range2dslider_runner {
    margin-left:-8px;
}
.xdsoft_range2dslider_box.xdsoft_range2dslider_box_bottom .xdsoft_range2dslider_runner {
    margin-bottom:-8px;
}
.xdsoft_range2dslider_box.xdsoft_range2dslider_box_right .xdsoft_range2dslider_runner {
    margin-right:-8px;
}
.xdsoft_legend {
    position:absolute;
    display:block;
    text-align:center;
    font-weight:700;
    font-family:Tahoma;
    vertical-align:middle;
    font-size:12px;
    z-index:3;
}
.xdsoft_range2dslider_grid {
    position:absolute !important;
    cursor:...

JavaScript

/**
 * @preserve jQuery Range2DSlider plugin v1.0.5
 * @homepage http://xdsoft.net/jqplugins/range2dslider/
 * (c) 2014, Chupurnov Valeriy.
 */
! function ($) {
    var ARROWLEFT = 37,
        ARROWUP = 38,
        ARROWRIGHT = 39,
        ARROWDOWN = 40,
        defaultOptions = {
            axis: [
                [0, 10],
                [0, 10]
            ],
            value: [
                [0, 0]
            ],

            projections: false,

            showRanges: false,

            skin: 'skin1',
            className: 'range2dslider',
            style: '',

            height: '100px',
            width: 'auto',
            x: 'left',
            y: 'bottom',

            posOnBoxClick: true,

            timeoutRecalc: 100,

            grid: true,
            gridStep: false,
            gridStyle: {
                width: 0.5,
                color: '#888',
                dashed: [5, 2]
            },

            round: false,
            roundMethod: Math.round, // work with round==true

            showLegend: [true, true],
            recalcLegends: false,

            tooltip: ['top'], // false, 'top','left','right','bottom'
            alwShowTooltip: [true], // false,true - work only with tooltip<>false

            onlyGridPoint: false,


            outOfRange: false,

            allowAxisMove: ['both'], // 'x','y','both'

            printLabel: function (value) {
                return value[0].toFixed(2) + '-' + value[1].toFixed(2)
            },

            parseValue: function (str) {
                var s = str.split(';'),
                    i, value = [],
                    prs = [];
                for (i = 0; i < s.length; i++) {
                    prs = s[i].split('|');
                    prs[0] = parseFloat(prs[0]);
                    prs[1] = parseFloat(prs[1]);
                    value.push(prs);
                }
                return value;
            },

            printValue: function (value) {
         ...