JSFiddle - React, Tailwind, and code Playground

by suman Negi

HTML

<div class="cv-slider-wrapper">
    <div class="cv-slider-range"><span class="cv-label-lt">0%</span>

        <div class="cv-slider" data-min="30" data-max="70">
            <div class="cv-left-range ui-corner-left ui-corner-right"></div>
        </div> <span class="cv-label-rt">100%</span> 
    </div> <span class="cv-min"><span class="cv-char">&#8806;</span><span class="cv-num"></span><span class='cv-downarrow'></span></span> <span class="cv-max"><span class="cv-char">&#8805;</span><span class="cv-num"></span><span class='cv-downarrow'></span></span>
    <p class="switch-color">
        <input type="checkbox" id="colorChk1" class="cv-change">
        <label for="colorChk1">Invert red and green</label>
    </p>
</div>

CSS

body, html {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px;
}
.cv-slider-wrapper {
    margin: 60px 0;
}
.cv-slider-range {
    position: relative;
    display: inline-block;
    width: 100%;
}
.cv-slider-range .cv-label-lt, .cv-slider-range .cv-label-rt {
    display: inline-block;
    width: 35px;
    position: relative;
    top: -3px;
    float: left;
}
.cv-slider-range .cv-label-lt {
    margin-right: 5px;
    text-align: right;
}
.cv-slider-range .cv-label-rt {
    margin-left: 5px;
    text-align: left;
}
.cv-slider {
    background: #9bcc8c;
    /* green */
    width: 95%;
    float: left;
    border:none;
}
.cv-slider.color-swap {
    background: #e57d72;
    /* red */
}
.ui-slider-range {
    background: #f1db5f;
    /* yellow */
}
.cv-left-range {
    background: #e57d72;
    /* red */
    position: absolute;
    height: 100%;
}
.cv-slider.color-swap .cv-left-range {
    background: #9bcc8c;
    /* green */
}
.ui-slider-horizontal {
    height: .5em;
}
.cv-slider .ui-slider-handle {
    background: #f00 url(images/slider-handler.png) no-repeat 0 0;
    width: 11px;
    height: 32px;
    border-radius: 0!important;
    border: none!important;
    margin-left: -10px;
    margin-top: 4px;
    outline: none!important;
}
.cv-slider .ui-slider-handle.last {
    background-position: -11px 0;
    margin-left: 0;
}
.cv-slider .ui-slider-handle.ui-state-active, .cv-slider .ui-slider-handle.ui-state-hover {
    background-position: 0 -32px;
}
.cv-slider .ui-slider-handle.last.ui-state-active, .cv-slider .ui-slider-handle.last.ui-state-hover {
    background-position: -11px -32px;
}
.cv-min, .cv-max {
    width: 45px;
    text-align: center;
    top: -33px!important;
    padding: 2px 5px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    border-bottom-right-radius: 0;
}
.cv-max {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius:...

JavaScript

$(document).ready(function () {
    if ($('div.cv-slider-wrapper').length > 0) {
        function slider() {
            $("div.cv-slider-wrapper").each(function enhanceSlider(index) {
                var $this = $(this),
                    rangeSlider = $this.find(".cv-slider"),
                    rangeMin = rangeSlider.data('min'),
                    rangeMax = rangeSlider.data('max'),
                    leftRangeBar = $this.find(".cv-left-range"),
                    handlers = [rangeMin, rangeMax],
                    leftHandler = handlers[0],
                    checkBox = $this.find(".cv-change"),
                    minDiv = $this.find(".cv-min"),
                    maxDiv = $this.find(".cv-max"),
                    minNum = $this.find(".cv-min .cv-num"),
                    maxNum = $this.find(".cv-max .cv-num"),
                    handleControler;
                var sliderTooltip = function (event, ui) {

                        leftHandler = ui.values[0];
                        leftRangeBar.css("width", leftHandler + "%");
                        if ($(ui.handle).index() == 2) {
                            current = ui.values[0];
                            compare = ui.values[1];
                            if (current == compare) {
                                return false;
                            } else {
                                $(ui.handle).find('span.cv-num').html(ui.values[0] + '%');
                            }
                        }
                        if ($(ui.handle).index() == 3) {
                            current = ui.values[1];
                            compare = ui.values[0];
                            if (current == compare) {
                                return false;
                            } else {
                                $(ui.handle).find('span.cv-num').html(ui.values[1] + '%');
                            }
                        }
                    }
               ...