本文将介绍如何使用 JavaScript 限制双滑块范围选择器，防止最大值小于最小值。我们将通过监听滑块的 input 事件，并动态调整另一个滑块的值，确保范围始终有效。
首先，让我们回顾一下基本的 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;}
核心逻辑在于 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();
代码解释：
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 与代码中的选择器匹配。
总结：
通过以上步骤，我们成功实现了一个双滑块范围选择器，并限制了最小值和最大值之间的关系，防止出现无效的范围选择。 这种方法简单有效，可以方便地应用于各种需要范围选择的场景中。
以上就是限制双滑块范围：防止最大值小于最小值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580629.html
微信扫一扫 
支付宝扫一扫 
