Back to Snippets

Double Range Slider JS

Filter prices or ranges effectively with this double slider. It allows users to select a minimum and maximum value simultaneously, and the track automatically highlights the selected range visually.

528

#javascript

#css

#range slider

#double slider

#filter

#price

#input

#ui

/HTML *CSS ()JS Output Live Updates

* {
  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();
}

fillColor();

Double Range Slider JS

Share Code Snippet