Price Range Slider — Free HTML CSS JS Dual Handle Range Slider Snippet

<div class="range-widget">
  <div class="range-labels">
    <span>Price Range</span>
    <span class="range-value" id="rangeValue">$20 - $180</span>
  </div>
  <div class="range-track-wrap">
    <div class="range-track"></div>
    <div class="range-fill" id="rangeFill"></div>
    <input type="range" min="0" max="200" value="20" step="1" class="range-input range-min" id="minRange" aria-label="Minimum price">
    <input type="range" min="0" max="200" value="180" step="1" class="range-input range-max" id="maxRange" aria-label="Maximum price">
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 40px; display: flex; align-items: center; flex-direction: column; gap: 20px; justify-content: center; min-height: 100vh; }

.range-widget { max-width: 320px; }

.range-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.range-labels span:first-child { font-size: 13px; font-weight: 600; color: #475569; }
.range-value { font-size: 13px; font-weight: 700; color: #6366f1; background: #eef2ff; padding: 4px 10px; border-radius: 999px; }

.range-track-wrap { position: relative; height: 32px; }

.range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  transform: translateY(-50%);
}

.range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  background: #6366f1;
  border-radius: 999px;
  transform: translateY(-50%);
}

.range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #6366f1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15,23,42,0.2);
  margin-top: 7px;
}
.range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #6366f1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15,23,42,0.2);
}
.range-input:focus-visible::-webkit-slider-thumb { outline: 2px solid #6366f1; outline-offset: 2px; }

const minRange = document.getElementById('minRange');
const maxRange = document.getElementById('maxRange');
const fill = document.getElementById('rangeFill');
const valueDisplay = document.getElementById('rangeValue');
const MAX = 200;
const GAP = 5;

function updateSlider() {
  let minVal = parseInt(minRange.value, 10);
  let maxVal = parseInt(maxRange.value, 10);

  if (maxVal - minVal < GAP) {
    if (this === minRange) {
      minVal = maxVal - GAP;
      minRange.value = minVal;
    } else {
      maxVal = minVal + GAP;
      maxRange.value = maxVal;
    }
  }

  const minPercent = (minVal / MAX) * 100;
  const maxPercent = (maxVal / MAX) * 100;

  fill.style.left = minPercent + '%';
  fill.style.width = (maxPercent - minPercent) + '%';
  valueDisplay.textContent = '$' + minVal + ' - $' + maxVal;
}

minRange.addEventListener('input', updateSlider);
maxRange.addEventListener('input', updateSlider);
updateSlider();