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

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");
});

此事件甚至没有触发。无论如何，将滑块设置为随机值

Answer 1

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

您遇到的问题是您无法在滑块控件中指定特定步骤。它们必须是从最小值到最大值的所有步骤。要解决此问题，您可以改为使滑块的值与JS数组中的值的索引匹配，并使用标签显示所选的实际选项。像这样：

<form id="sliderData">
    <input id="slider1" type="range" min="0" max="5" value="0">
    <span>2</span> <!-- default value -->
</form>

var values = [2, 30, 20, 30, 35, 45];
$('#slider1').change(function() {
    $('span').text(values[this.value]);
});

Working example