如何限制HTML范围滑块移动超出范围

Question

我使用范围为0到100的范围滑块，当前值设置为最大

我的目标是我有一个50的极限值，以便滑块可以在50和100之间移动，而不是在0到50之间移动。我已经设置了一个jQuery处理程序，如下所示，但是我仍然可以从50向后移动。

有没有办法防止滑块从50向后移动？

$(document).on("input change", "#range", function() {
var scrolled_value = $(this).val();
var limiting_value = 50;
if (scrolled_value <= limitng_value)
return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="range" type="range" name="range" min="0" value="100" max="100" />

Answer 1

您可以在change事件中设置值以阻止其低于该值：

if (scrolled_value <= limiting_value)
$(this).val(limiting_value);

提供更新的片段(对原始片段的更改尽可能少(：

$(document).on("input change", "#range", function() {
var scrolled_value = $(this).val();
var limiting_value = 50;
if (scrolled_value <= limiting_value)
$(this).val(limiting_value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="range" type="range" name="range" min="0" value="100" max="100" />

Answer 2

您可以通过在滑块值低于50时将其设置为50来解决此问题，如下所示：

const input = document.querySelector("input");
const sliderLimit = 50;

input.addEventListener("input", () => {
if (input.value < sliderLimit)
input.value = sliderLimit;
})

<input type="range" min="0" value="100" max="100" />

Answer 3

使用jQuery(类似OP(的最小解决方案，同时限制第一次渲染的值

$('input').on("input change", function() {
if (this.value > 50 )
this.value = 50
}).trigger('change')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="0" value="100" max="100" />

顺便说一句，我已经创建了一个漂亮的仅限CSS的范围滑块：https://github.com/yairEO/ui-range