0

ここに私が達成しようとしているもののサンプル画像があります

ここに画像の説明を入力

150 の値からクリックすると、ハンドルは 50 にのみ移動し、150 にジャンプすることはありません。もう一度クリックすると、50 から 100 に移動します。

逆に、ハンドルの値が 150 で、値 5 をクリックすると、5 に直接ジャンプするのではなく、150 から 100 に移動する必要があります。

どうやってやるの？

これが私のコードです：

var valMap = [5, 10, 20, 50, 100, 150];
value = 0;
var slider = $("#slider").slider({
    disabled: false,
    animate: true,
    min: 0,
    max: valMap.length - 1,
    slide: function (event, ui) {
        slider.slider("option", "animate", "slow");

    },
    change: function () {

        var Slideval = $(this).slider('value');
        console.log(Slideval, value)
        if(value < Slideval) {
            console.log("incremented")
        } else if(value > Slideval) {
            console.log("decremented")
        }
        value = Slideval;
    }
});

jsfiddle のサンプルは次のとおりです: http://jsfiddle.net/endl3ss/jNwww/21/

4

3 に答える 3

1

スライダーについてはよくわかりませんが、仕様に基づいた実用的なソリューションは次のとおりです。

http://jsfiddle.net/5xMMz/11/

ここに参照用の完全なコードがあります

    var valMap = [5, 10, 20, 50, 100, 150,500,1000,5000];
    value= 0;
    var lastSlideValue = 0;
    var internalSlideCalling = false;

    var slider = $("#slider").slider({
    disabled : false,
    animate : true,
    min : 0,
    max : valMap.length - 1,
    slide : function(event, ui) {
        slider.slider("option", "animate", "slow");
    },
    change: function(){

        var Slideval = $(this).slider('value');

        if (!internalSlideCalling)
        {
            if (Slideval>lastSlideValue && lastSlideValue < $(this).slider('option','max'))
            {
                Slideval = lastSlideValue+1;
            }
            else if (lastSlideValue > $(this).slider('option','min'))
            {
                Slideval = lastSlideValue-1;                
            }
            lastSlideValue = Slideval;
        }

        console.log(Slideval, value)

        if(value < Slideval) {
          console.log("incremented")
        } else if(value > Slideval){
          console.log("decremented")
        }
        value = Slideval;

        if (!internalSlideCalling){
            internalSlideCalling = true;
            $(this).slider('value',Slideval);
        }
        else 
            internalSlideCalling = false;
    }
});

$("#slider").slider('values',valMap);
于 2013-05-15T07:45:08.123 に答える
1

次に、スライダーを動かしたときに発生するイベントを使用して、スライダーの値を設定できます。スライダーの値を手動で設定できます。

これはイベントコードです

slide: function( event, ui ) {
            // code
        },




$('#id').slider("value",value); //using this we can set the slider value
于 2013-05-15T07:16:20.703 に答える
0

使用する

$("#slider").slider({
    step: 50
})

詳細については、次のリンクを参照してください - http://jqueryui.com/slider/#steps

于 2013-05-15T07:08:16.470 に答える