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

Question

我正在使用 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");
});

这个事件甚至 firing.Is 无论如何都没有将滑块设置为随机值

Answer 1

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

您遇到的问题是无法在滑块控件中指定特定步骤。从最小值到最大值，它们必须是相同的步长。要解决这个问题，您可以改为让滑块的值与 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>

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

How to set slider step values to some fixed values?

javascript

jquery

jquery-plugins