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

次のようなスライダーの HTML コードを上書きする JavaScript 関数を取得できません。

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

2 に答える 2

1

イベントの値を確認し、onSlide36 に達したらスライダーのステップ プロパティを変更できます。

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 に答える