如何用 JavaScript 实现一个双滑块组件，并限制右滑块不能推动左滑块

在前端开发中，展示一个数值范围（如价格区间或时间段）时，双滑块组件非常实用。这种组件允许用户拖动两个滑块，一个表示最小值，另一个表示最大值，便于直观地设定范围。同时，为了避免数值范围出现错误，需确保当右滑块（最大值）拖动时，左滑块（最小值）不被推动到更大的位置，反之亦然。

HTML 结构

定义两个滑块和一个显示范围的容器：

<div>
  <input type="range" id="minSlider" min="0" max="100" value="25">
  <input type="range" id="maxSlider" min="0" max="100" value="75">
  <p>范围: <span id="rangeDisplay">25 - 75</span></p>
</div>

JavaScript 代码

通过 JavaScript 监听滑块的拖动事件，并确保滑块的值不会越界：

// 获取滑块元素和显示范围的容器
const minSlider = document.getElementById("minSlider");
const maxSlider = document.getElementById("maxSlider");
const rangeDisplay = document.getElementById("rangeDisplay");

// 更新滑块值和范围显示的函数
function updateSliders(e) {
  let minL = parseInt(minSlider.value); // 获取左滑块的值并转为整数
  let maxL = parseInt(maxSlider.value); // 获取右滑块的值并转为整数

  // 如果左滑块被拖动且值超过右滑块，将左滑块值设为右滑块的值
  if (e && e.target.id === "minSlider" && minL > maxL) {
    minSlider.value = maxL;
    minL = maxL;
  }
  
  // 如果右滑块被拖动且值低于左滑块，将右滑块值设为左滑块的值
  if (e && e.target.id === "maxSlider" && maxL < minL) {
    maxSlider.value = minL;
    maxL = minL;
  }

  // 更新范围显示内容
  rangeDisplay.textContent = `${minL} - ${maxL}`;
}

// 为滑块添加事件监听，触发 updateSliders 函数
minSlider.addEventListener("input", updateSliders);
maxSlider.addEventListener("input", updateSliders);

相关文章：

本文标签: