javascript - JQuery Rangeslider步骤更改问题

Question

我正在使用 JQuery 范围滑块。

我希望最小值为 6，最大值为 60，这是我在 html 代码中设置的...

<input type="range" value="18" min="6" max="60" step="6" >

步长应该增加 6 直到达到 36。当滑块达到 36 时，步长增加 12（应该这样做）......然后它应该会捕捉到 48，然后是 60，但它会增加到 42，然后54和66！

所以不要去 6,12,18,24,30,36,48,60

好像去了。。

6,12,18,24,30,36,42,54,66

有谁知道我可以做些什么来确保步长在被告知的地方增加并显示正确的数量？

检查这个以类似方式工作的Codepen

谢谢</p>

score 0 · Accepted Answer

您需要为此使用 jquery。您正在将step属性传递给input元素。这意味着，该值增加了步长

如果值高于 36，则首先需要删除属性。然后使用attr函数添加step属性并将 a 设置为value等于 12。

if ($(input[type="range").val() >= 36) {
  $(this).removeAttr('step')
         .attr('step', 12);
}

注意：这将更改所有输入范围字段的属性。如果只想更改一个，则需要在输入字段中添加一个 id。

然后使用 id 选择器

$('#range1')

score 0 · Accepted Answer

代码是明确的，就在codepen中：

if (v>=36) {
  $r.data().plugin_rangeslider.step = 12;
} else {
  $r.data().plugin_rangeslider.step = 6;
}

如果该值大于或等于 36，则步长变为 12。

如果您想将步骤保持在 6，您可以完全删除这段代码。

2 回答 2