本文档旨在提供一种使用 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 结构
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;
}代码解释：
- HTML 结构: 定义了包含两个 input[type="range"] 元素的容器，以及用于显示最小值和最大值的输入框。js-two-range-slider-input 类用于 JavaScript 代码中选取滑块元素。
-
JavaScript 代码:
- twoRangeSlider 立即执行函数，创建了一个包含 init 方法的对象，用于初始化滑块。
- bindComponent 方法用于绑定滑块的事件监听器。它选取两个滑块元素，并为每个滑块添加 input 事件监听器。
- 在 input 事件监听器中，判断是哪个滑块的值发生了变化。如果改变的是右边的滑块，则将左边滑块的最大值设置为当前右边滑块的值减1。 如果改变的是左边的滑块，则将右边滑块的最小值设置为当前左边滑块的值加1。
总结
通过以上步骤，我们可以轻松实现双滑块范围的限制，确保用户在交互过程中始终保持有效的范围选择。 这种方法简单有效，可以应用于各种需要范围选择的场景。
