限制双滑块范围：防止最小值超过最大值

本文档旨在提供一种使用 JavaScript 实现双滑块范围限制的方法，以防止用户在调整滑块时出现最小值超过最大值，或最大值低于最小值的情况。通过监听滑块的 input 事件，并动态调整另一个滑块的值，确保范围的有效性。本文将提供详细的代码示例和解释，帮助开发者轻松实现这一功能。

实现原理

核心思路是监听两个滑块的 input 事件。当一个滑块的值发生变化时，立即检查它是否超过了另一个滑块的值。如果超过，则强制将另一个滑块的值调整到临界值，从而保证最小值始终小于等于最大值。

代码实现

以下是一个简洁的实现示例，展示了如何使用 JavaScript 限制双滑块的范围：

const twoRangeSlider = (() => {

  const bindComponent = (item) => {
    const rangeInputs = item.querySelectorAll('.js-two-range-slider-input');

    item.addEventListener("input", ({ target }) => {
      const [ right, left ] = rangeInputs;
      if (target == right) {
        left.value = Math.min(+right.value -1, +left.value);
      } else {
        right.value = Math.max(+left.value +1, +right.value);
      }

    });

  };

  const init = () => {
    const rootEl = document.getElementsByClassName("js-two-range-slider");
    [...rootEl].forEach((item) => bindComponent(item));
  };

  return {
    init
  };
})();

twoRangeSlider.init();

HTML 结构

科大讯飞-AI虚拟主播

科大讯飞推出的移动互联网智能交互平台，为开发者免费提供：涵盖语音能力增强型SDK，一站式人机智能语音交互解决方案，专业全面的移动应用分析；

下载

  
  

  

    
Min

    
Max

  

CSS 样式

.two-range-slider {
  position: relative;
  height: 4px;
  width: 164px;
  margin-bottom: 50px;
}

.two-range-slider__input {
  position: absolute;
  left: 40%;
  top: 15px;
  box-shadow: 0;
  appearance: none;
  width: 60%;
  height: 3px;
  border-radius: 50px;
  background-color: #000;
  outline: 0;
}

.two-range-slider__value {
  padding: 0px 10px;
  color: #000;
  position: relative;
  top: 19px;
  outline: none;
  width: 50px;
  position: absolute;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-range-slider__input::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}

.two-range-slider__input::-moz-range-thumb {
  z-index: 2;
  position: relative;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 0;
  background: #FFFFFF;
  cursor: pointer;
}

.two-range-slider__output {
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 140%;
  top: -15px;
  margin-left: 0px;
  color: #000;
  position: relative;
}

.range-slider__value {
  padding: 0px 10px;
  color: #000;
  outline: none;
  width: 50px;
}

代码解释：

1. HTML 结构: 定义了包含两个 input[type="range"] 元素的容器，以及用于显示最小值和最大值的输入框。js-two-range-slider-input 类用于 JavaScript 代码中选取滑块元素。
2. JavaScript 代码:
   • twoRangeSlider 立即执行函数，创建了一个包含 init 方法的对象，用于初始化滑块。
   • bindComponent 方法用于绑定滑块的事件监听器。它选取两个滑块元素，并为每个滑块添加 input 事件监听器。
   • 在 input 事件监听器中，判断是哪个滑块的值发生了变化。如果改变的是右边的滑块，则将左边滑块的最大值设置为当前右边滑块的值减1。 如果改变的是左边的滑块，则将右边滑块的最小值设置为当前左边滑块的值加1。

总结

通过以上步骤，我们可以轻松实现双滑块范围的限制，确保用户在交互过程中始终保持有效的范围选择。 这种方法简单有效，可以应用于各种需要范围选择的场景。