如何将滑块步长值设置为某些固定值

How to set slider step values to some fixed values?

本文关键字：设置      更新时间：2023-12-25

我正在用jQuery滑块处理滑块，我有一个inout滑块作为

<form id="sliderData">
  <input id="slider1" type="range" min="0" max="50" step="">
</form>

我希望滑块只设置为一些固定值[2,30,20,30,35,45]。所以我无法设置步长值。我已尝试通过此代码启动事件

$('form#sliderData').change(function () {
    alert("Hello");
});

这项活动甚至没有开火。是否有将滑块设置为随机值

事件没有被触发，因为您需要将更改事件挂接到滑块控件本身，而不是它的父窗体。

问题是无法在滑块控件中指定特定的步骤。从最小值到最大值，它们必须都是相同的步长。为了解决这个问题，您可以让滑块的值与JS数组中值的索引匹配，并使用一个标签显示所选的实际选项。类似这样的东西：

var values = [2, 30, 20, 30, 35, 45];
$('#slider1').on('input', e => $('span').text(values[e.target.value]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="sliderData">
  <input id="slider1" type="range" min="0" max="5" value="0">
  <span>2</span>
</form>

相关文章：