JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.0.13/js/ion.rangeSlider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.0.13/css/ion.rangeSlider.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.0.13/css/ion.rangeSlider.skinFlat.min.css">
<input type="text" id="slider1" name="slider1" value="" />

<br>
<br>

<input type="text" id="slider2" name="slider2" value="" />

CSS

body {
    padding: 50px 30px;
}


/* ionRangeSliderOverride */
.irs-bar, .irs-bar-edge { 
    background: none;
}

.irs-shadow {
    height: 12px;
    top: 25px;
}

.irs-slider {
    cursor:pointer;
    background-color: rgba(0,0,0,0.5);
}

.irs-single {
    
}

JavaScript

$("#slider1").ionRangeSlider({
 	min: 63,
    max: 102,
    
    onFinish: function (data) {
        console.log(data);
		slider2.update({
    		from_min: data.from + 12,
		    from_max: data.from +30
        });
    }
 
});
var slider1 =  $("#slider1").data("ionRangeSlider");


var slider2 = $("#slider2").ionRangeSlider({
 	min: 80,
    max: 130,
    from: 109,
    from_min: 100,
    from_max: 118,
	from_shadow: true
});
var slider2 =  $("#slider2").data("ionRangeSlider");