1

我正在使用 Andre Ruffert 的优秀 rangeslider.js

我有一个问题。我设置了滑块，所以当我像这样移动滑块时，我的数字以 6 为增量增加：6,12,18,24,30,36,42,48,54,60

但是，我希望滑块在达到 36 时以 12 为增量增加，从而跳过“42”和“54”，这样当我移动滑块时，它可以被拉到以下位置：6,12,18,24,30 ,36,48,60

有没有办法可以在 js 或 html 中做到这一点？

这是应该设置滑块值的代码，但由于某种原因这不起作用：

$(function() {
        var valMap = [6, 12, 18, 24, 36, 48, 60];
        $("#term").rangeslider({
            min: 6,
            max: valMap.length - 1,
            value: 24,
            slide: function(event, ui) {                        
                $("#amount").val(valMap[ui.value]);                
            }       
        });

我无法让 JavaScript 函数覆盖滑块的 HTML 代码，如下所示：

<input type="range" name="term" min="6" max="60" step="6" value="36" data-rangeslider>
4

2 回答 2

1

您可以检查onSlide事件的值并在滑块达到 36 后更改其 step 属性：

var $r = $('input[type=range]');
onSlide: function(position, value) {
    if (v>=36) {      
      $r.data().plugin_rangeslider.step = 12;
    }
    else {
      $r.data().plugin_rangeslider.step = 6;
    }
}

检查这个代码笔

编辑：

值：最小值、最大值和值，您应该将其作为属性放在 html 元素上，而不是在初始化时。也没有任何slide功能。看这个例子（codepen）

$("#term").rangeslider({
    polyfill: false,
    onInit: function() {
        $ruler[0].innerHTML = getRulerRange(this.min, this.max, rulerStep);
        this.$range.prepend($ruler);},
    onSlide: function(p,v) {
        if (!$("#term").data().plugin_rangeslider)
          return;
        if (v>=36) {      
          $("#term").data().plugin_rangeslider.step = 12;
        }
        else {
          $("#term").data().plugin_rangeslider.step = 6;
        }
    },
    onSlideEnd: function(p, v) {
        $('#val').attr('value', v)
    }    
});
于 2015-03-04T21:18:04.620 回答
0

根据接受的答案，您可以使用较新版本的 rangelider.js：

var $r = $('input[type=range]');
onSlide: function(position, value) {
    if (v >= 36) {      
        this.step = 12;
    }
    else {
        this.step = 6;
    }
}
于 2018-06-23T10:39:50.127 回答