JSFiddle - React, Tailwind, and code Playground

by Genri_Rus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="price-slider">
	<input value="0" min="0" max="100" step="0.5" type="range">
	<input value="100" min="0" max="100" step="0.5" type="range">
</div>

CSS

.price-slider {
    position: relative;
    width: 350px;
    margin: 0 0 20px;
    height: 35px;
}

.price-slider input {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 90px;
    width: 100%;
    outline: none;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
}

.price-slider input[type="range"] {
  background-color: red;
  height: 10px;
	-webkit-appearance: none;
}

.price-slider input::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 5px 1px #ccc;
}

JavaScript

$('.price-slider input').each(function(index, slider) {
	slider = $(slider);
	slider.on('input', () => updatePriceLabels(index, slider));
});

function updatePriceLabels(index, slider) {
    var sliders = $('.price-slider').find('input');
    let val1 = sliders.eq(0).val();
		let val2 = sliders.eq(1).val();
   
  
    if (val1 > val2 && index == 0) {
    		return sliders.eq(0).val(val2);
    }
		if (val1 > val2 && index == 1) {
				return sliders.eq(1).val(val1);
		}
    
    if ((val1 > 0 || val2 < 99) && val1 <= val2) {
        sliders.css({"background" : "-webkit-gradient(linear, 0 0, 100% 0, color-stop(0, #ccc), color-stop(" + (val1 / 100) +", #ccc), color-stop(" + (val1 / 100) + ", #9c27b0), color-stop(" + (val2 / 100) + ", #9c27b0), color-stop(" + (val2 / 100) + ", #ccc))"});
    } else {
        sliders.css("background", "");
    }
}