JSFiddle - React, Tailwind, and code Playground

by Genri_Rus

HTML

<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>

<div class="text-value">
  <input class="value-left" value="0">
  <input class="value-right" value="0">
</div>

CSS

.price-slider, .text-value {
    margin-left: 60px;
}

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

.price-slider input {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    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;
}

.text-value {
  position: relative;
}

JavaScript

const slider = $('.price-slider');

slider.on('input', updatePriceLabels);

function updatePriceLabels() {
    var sliders = slider.children('input');
    var x, y = 0;

    var val1 = parseInt(sliders[0].value);
    var val2 = parseInt(sliders[1].value);
    
    if (val1 >= val2) {
        // sliders[0].value = val2 - 0;
        sliders[1].value = val1;
        return; 
    }
    if (val2 <= val1) {
        sliders[0].value = val2;
        return;
    }
    
    if (val1 > 0 || val2 < 99) {
        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", "");
    }
}