限制双滑块范围：防止最大值小于最小值-html教程-PHP中文网

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

DDD

发布： 2025-10-03 10:51:12

原创

775人浏览过

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

本文将介绍如何使用 JavaScript 限制双滑块范围选择器，防止最大值小于最小值。我们将通过监听滑块的 input 事件，并动态调整另一个滑块的值，确保范围始终有效。

首先，让我们回顾一下基本的 HTML 结构，它定义了两个滑块输入框：

<div class="two-range-slider js-two-range-slider">
  <input type="range" value="80" min="10" max="100" step="1" class="two-range-slider__input js-two-range-slider-input">
  <input type="range" value="30" min="10" max="100" step="1" class="two-range-slider__input js-two-range-slider-input">

  <div class="two-range-slider__output">
    <p class="minmax">Min</p><input class="two-range-slider__value js-two-range-slider-min-value" type="number" value="30" min="10" max="100" step="1">
    <p class="maxmin">Max</p><input style="right: -5px;" class="two-range-slider__value js-two-range-slider-max-value" type="number" value="80" min="10" max="100" step="1">
  </div>

</div>

登录后复制

接下来是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;
}

登录后复制

核心逻辑在于 JavaScript 代码，它负责监听滑块的 input 事件并进行调整：

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();

登录后复制

代码解释：

小浣熊家族

小浣熊家族是基于商汤自研大语言模型的AI助手，提供代码小浣熊AI助手、办公小浣熊AI助手两大功能模块

查看详情

twoRangeSlider 函数: 这是一个立即执行函数表达式 (IIFE)，用于创建一个私有作用域，避免变量污染。
bindComponent(item) 函数: 这个函数负责将事件监听器绑定到每个双滑块组件。
- rangeInputs = item.querySelectorAll('.js-two-range-slider-input'): 获取当前组件中的两个滑块输入元素。
- item.addEventListener("input", ({ target }) => { ... });: 为组件添加一个 input 事件监听器。当任何一个滑块的值发生改变时，该监听器将被触发。
- const [ right, left ] = rangeInputs;: 将两个滑块输入元素分别赋值给 right (最大值滑块) 和 left (最小值滑块) 变量。
- if (target == right) { ... } else { ... }: 检查触发 input 事件的是哪个滑块。
  - 如果触发事件的是 right 滑块（最大值），则将 left 滑块（最小值）的值设置为 Math.min(+right.value - 1, +left.value)。这意味着，left 滑块的值将被限制为小于 right 滑块的值至少 1。
  - 如果触发事件的是 left 滑块（最小值），则将 right 滑块（最大值）的值设置为 Math.max(+left.value + 1, +right.value)。这意味着，right 滑块的值将被限制为大于 left 滑块的值至少 1。
init() 函数:
- rootEl = document.getElementsByClassName("js-two-range-slider"): 获取所有带有 js-two-range-slider 类的元素，这些元素代表双滑块组件。
- [...rootEl].forEach((item) => bindComponent(item));: 遍历所有双滑块组件，并调用 bindComponent() 函数将事件监听器绑定到每个组件。
return { init }: 返回一个包含 init 函数的对象，使 init 函数可以从外部调用。
twoRangeSlider.init(): 调用 init 函数，启动双滑块组件的初始化过程。

注意事项：

代码中使用了 + 运算符将 rangeInputs 的 value 属性转换为数字。
代码确保最小值始终小于最大值至少为1。您可以根据需要调整这个差值。
此代码依赖于特定的 HTML 结构和 CSS 类名。请确保您的 HTML 和 CSS 与代码中的选择器匹配。

总结：

通过以上步骤，我们成功实现了一个双滑块范围选择器，并限制了最小值和最大值之间的关系，防止出现无效的范围选择。这种方法简单有效，可以方便地应用于各种需要范围选择的场景中。

以上就是限制双滑块范围：防止最大值小于最小值的详细内容，更多请关注php中文网其它相关文章！