如何限制 HTML 范围滑块移动超出范围
How to restrict HTML range slider from moving beyond a range
我正在使用范围为 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" />
当滑块值低于 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" />
您可以在 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" />
使用 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
我正在使用范围为 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" />
当滑块值低于 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" />
您可以在 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" />
使用 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