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> <span class="cv-max"></span>
   
</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: 80%;
    float: left;
    border:none;
}

.ui-slider-range {
    background: #f1db5f;
    /* yellow */
}


.cv-slider .ui-slider-handle {
    background: #f00;
    width: 11px;
    height: 32px;
      margin-left: -10px;
    margin-top: 4px;
    outline: none!important;
}
.cv-slider .ui-slider-handle.last {
    background-position: -11px 0;
    margin-left: 0;
}

.cv-min, .cv-max {
    width: 45px;
    text-align: center;
    top: -33px!important;
    padding: 2px 5px;
    background: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    border-bottom-right-radius: 0;
    color:#fff;
   
}
.cv-max {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0;
}

.ui-slider-handle span {
    visibility:hidden;
}
.ui-slider-handle.ui-state-hover span, .ui-slider-handle.ui-state-active.ui-state-focus span {
    visibility:visible;
}

JavaScript

-$(document).ready(function() {

        function slider() {
            $("div.cv-slider-wrapper").each(function enhanceSlider(index) {
                var $this = $(this),
                    rangeSlider = $this.find(".cv-slider"),
                    minDiv = $this.find(".cv-min"),
                    maxDiv = $this.find(".cv-max");
                var sliderTooltip = function(event, ui) {
           
                    if($(ui.handle).index() == 2) {
                        current = ui.values[0];
                        compare = ui.values[1];
                        if(current == compare) {
                            return false;
                        } else {
                            $(ui.handle).find('span.cv-min').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-max').html(ui.values[1] + '%');
                        }
                    }
                }
                rangeSlider.slider({
                    range: true,
                    min: 0,
                    max: 100,
                    range: true,
                    values: [30, 70],
                    create: function() {
                        var handler = $(this).find("a");
                        minDiv.appendTo(handler.get(0));
                        maxDiv.appendTo(handler.get(1));
                        $(handler).eq(1).addClass("last");
                    },
                    slide: sliderTooltip
                    
                    
                });
                
                
                minDiv.html($(rangeSlider).slider('values', 0) + '%');
                minDiv.position({
                   ...