JQuery 范围滑块步进更改问题

JQuery Rangeslider step change issue

本文关键字：问题 步进 范围 JQuery      更新时间：2023-09-26

我正在使用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

谢谢​

代码是显式的，就在代码笔中：

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

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

如果要将步骤保持在 6，可以完全删除此代码片段。

你需要使用 jquery 来实现这一点。您正在将 step 属性传递给 input 元素。这意味着，该值按步长数量增加

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

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

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

然后使用 id 选择器

$('#range1')
相关文章：