* {
  box-sizing: border-box;
}
.wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding-top: 5px;
}
.slider-track {
  width: 100%;
  height: 5px;
  background-color: #d1d5db;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 5px;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  outline: none;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  background-color: transparent;
  pointer-events: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 5px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background-color: #3b82f6;
  cursor: pointer;
  border-radius: 50%;
  pointer-events: auto;
  margin-top: -8px;
  box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(0,0,0,0.2);
}
.values {
  background-color: #3b82f6;
  width: 80px;
  position: relative;
  margin: 90px auto 0 auto;
  padding: 7px;
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  color: #ffffff;
}

let sliderOne = document.getElementById("slider-1");
let sliderTwo = document.getElementById("slider-2");
let displayValOne = document.getElementById("range1");
let displayValTwo = document.getElementById("range2");
let minGap = 5;
let sliderTrack = document.querySelector(".slider-track");
let sliderMaxValue = document.getElementById("slider-1").max;

function slideOne() {
  if (parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap) {
    sliderOne.value = parseInt(sliderTwo.value) - minGap;
  }
  displayValOne.textContent = sliderOne.value;
  fillColor();
}

function slideTwo() {
  if (parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap) {
    sliderTwo.value = parseInt(sliderOne.value) + minGap;
  }
  displayValTwo.textContent = sliderTwo.value;
  fillColor();
}

function fillColor() {
  let percent1 = (sliderOne.value / sliderMaxValue) * 100;
  let percent2 = (sliderTwo.value / sliderMaxValue) * 100;
  sliderTrack.style.background = `linear-gradient(to right, #d1d5db ${percent1}%, #3b82f6 ${percent1}%, #3b82f6 ${percent2}%, #d1d5db ${percent2}%)`;
}

fillColor();