多区域Price Range Slider失效：仅首个区域滑块可正常工作

你的代码只让第一个滑块工作的原因是：

1. 全局选择器（如document.querySelector(".slider .progress1")）仅获取到第一个进度条元素，后续滑块的操作都会指向第一个进度条
2. 所有输入框和滑块都是全局选择的，没有和对应滑块组关联，导致操作时始终调用第一组的元素

修改后的HTML代码 #

给每个滑块组添加独立容器，确保元素隔离：

<!-- 第一个滑块组 -->
<div class="price-slider-container">
  <div class="price-input">
    <div class="field">
      <input type="number" class="input-min" value="1000">
      <div class="separator">-</div>
      <input type="number" class="input-max" value="100000">
    </div>
  </div>
  <div class="slider">
    <div class="progress1"></div>
  </div>
  <div class="range-input">
    <input type="range" class="range-min" min="1000" max="100000" value="1000" step="100">
    <input type="range" class="range-max" min="0" max="100000" value="100000" step="100">
  </div>
</div>

<!-- 第二个滑块组 -->
<div class="price-slider-container">
  <div class="price-input">
    <div class="field">
      <input type="number" class="input-min" value="1000">
      <div class="separator">-</div>
      <input type="number" class="input-max" value="100000">
    </div>
  </div>
  <div class="slider">
    <div class="progress1"></div>
  </div>
  <div class="range-input">
    <input type="range" class="range-min" min="1000" max="100000" value="1000" step="100">
    <input type="range" class="range-max" min="0" max="100000" value="100000" step="100">
  </div>
</div>

<!-- 第三个滑块组 -->
<div class="price-slider-container">
  <div class="price-input">
    <div class="field">
      <input type="number" class="input-min" value="1000">
      <div class="separator">-</div>
      <input type="number" class="input-max" value="100000">
    </div>
  </div>
  <div class="slider">
    <div class="progress1"></div>
  </div>
  <div class="range-input">
    <input type="range" class="range-min" min="1000" max="100000" value="1000" step="100">
    <input type="range" class="range-max" min="0" max="100000" value="100000" step="100">
  </div>
</div>

修改后的JavaScript代码 #

遍历每个滑块容器，对每组元素单独绑定事件，确保相互独立：

// 遍历所有滑块容器，逐个初始化
document.querySelectorAll('.price-slider-container').forEach(container => {
  // 在当前容器内获取对应元素
  const rangeInput = container.querySelectorAll(".range-input input"),
        priceInput = container.querySelectorAll(".price-input input"),
        range = container.querySelector(".slider .progress1");

  const priceGap = 1000;

  // 价格输入框事件处理
  priceInput.forEach(input => {
    input.addEventListener("input", e => {
      const minPrice = parseInt(priceInput[0].value),
            maxPrice = parseInt(priceInput[1].value);

      if ((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput[1].max) {
        if (e.target.classList.contains("input-min")) {
          rangeInput[0].value = minPrice;
          range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";
        } else {
          rangeInput[1].value = maxPrice;
          range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
        }
      }
    });
  });

  // 滑块拖动事件处理
  rangeInput.forEach(input => {
    input.addEventListener("input", e => {
      const minVal = parseInt(rangeInput[0].value),
            maxVal = parseInt(rangeInput[1].value);

      if ((maxVal - minVal) < priceGap) {
        if (e.target.classList.contains("range-min")) {
          rangeInput[0].value = maxVal - priceGap;
        } else {
          rangeInput[1].value = minVal + priceGap;
        }
      } else {
        priceInput[0].value = minVal;
        priceInput[1].value = maxVal;
        range.style.left = ((minVal / rangeInput[0].max) * 100) + "%";
        range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
      }
    });
  });
});

核心修改点 #

• 新增price-slider-container容器，将每个滑块组的元素包裹起来，实现组内隔离
• 不再使用全局选择器，而是在每个容器内部获取对应的输入框、滑块和进度条元素
• 事件绑定逻辑保持原有功能，但所有操作都局限在当前容器内，确保每个滑块组独立运行

内容的提问来源于stack exchange，提问作者Pranil