如何阻止双滑块Range Input的滑块相互越界？

数据老陈

2026-7-31

修复双范围滑块互相越过的问题

要解决最小值滑块和最大值滑块互相越过的问题，核心是在滑块拖动时添加数值边界校验，确保最小值始终≤最大值，最大值始终≥最小值。

修改后的完整实现代码

HTML（修正初始值异常问题）

<div class="zimmer__price">
 <input type="range" min="200" max="500" step="50" value="200" id="lower">
 <input type="range" min="200" max="500" step="50" value="500" id="upper">
</div>

注：原HTML中最小值滑块初始值设为50，但input的min是200，浏览器会自动修正为200，这里直接把初始值调整为符合范围的数值，避免异常。

JS（添加边界校验逻辑）

// 获取滑块DOM元素
const lowerSlider = document.getElementById('lower');
const upperSlider = document.getElementById('upper');
// 初始化价格范围数组
let currentPriceRange = [parseInt(lowerSlider.value), parseInt(upperSlider.value)];

upperSlider.oninput = () => {
  const lowerVal = parseInt(lowerSlider.value, 10);
  let upperVal = parseInt(upperSlider.value, 10);

  // 强制最大值不小于最小值
  if (upperVal < lowerVal) {
    upperVal = lowerVal;
    upperSlider.value = upperVal;
  }

  currentPriceRange[1] = upperVal;
};

lowerSlider.oninput = () => {
  let lowerVal = parseInt(lowerSlider.value, 10);
  const upperVal = parseInt(upperSlider.value, 10);

  // 强制最小值不大于最大值
  if (lowerVal > upperVal) {
    lowerVal = upperVal;
    lowerSlider.value = lowerVal;
  }

  currentPriceRange[0] = lowerVal;
};