JQuery Rangeslider步骤更改问题答案

【问题标题】：JQuery Rangeslider step change issueJQuery Rangeslider步骤更改问题
【发布时间】：2015-03-10 16:26:43
【问题描述】：

我正在使用 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 以类似的方式工作

谢谢

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

然后使用id选择器

$('#range1')

【讨论】：