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

Question

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

我的 objective 是我有一个限制值 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

当滑块值低于 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 2

您可以在 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 3

使用 jQuery 的最小解决方案（如 OP），同时还限制了 first-render[=13= 的值]

$('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-only range slider： https://github.com/yairEO/ui-range

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

How to restrict HTML range slider from moving beyond a range

html

jquery

rangeslider