web-dev-qa-db-ja.com

Bootstrap Slider change value handler

Bootstrap Sliderを使用しています。値変更のハンドラーを含める方法があるかどうか疑問に思っていました。ドキュメントには、slideStart、slide、slideStopのハンドラーが含まれていますが、 「値」の「変更」。

スライダーをスライドさせて（リリースすると）同じ値になる可能性があります。その場合、イベントを発生させたくありません。新しい値にスライドする場合のみ。

私はもう試した：

$('#sliderAdminType').slider({
    formater: function(value) {
        // my formater stuff that works
        },
    change: function(event, ui) {
        console.log("has changed");
        }       
    });

そして

$('#sliderAdminType').change(function() {
    console.log("has changed");
});

そして

$('#sliderAdminType').slider().change(function() {
    console.log("has changed");
});

そして

$('body').on('change', '#sliderAdminType', function(e){
    console.log("has changed");
});
jquerytwitter-bootstrapslider
17
Lys777

次の手順を実行できます。

1）slideStartイベントを使用して、スライダーの元の値を取得します

2）slideStopイベントを使用して、スライダーの新しい値を取得します

3）この2つの値を比較し、異なる場合はコードを実行します

var originalVal;

$('.span2').slider().on('slideStart', function(ev){
    originalVal = $('.span2').data('slider').getValue();
});

$('.span2').slider().on('slideStop', function(ev){
    var newVal = $('.span2').data('slider').getValue();
    if(originalVal != newVal) {
        alert('Value Changed!');
    }
});

Fiddle Demo

31
Felix

受け入れられた答えはrange：trueスライダーに対して無効です

ダブルスライダーチェックは次のとおりです。 https://jsfiddle.net/oayj5Lhb/

ダブルスライダーの場合：「change」イベントは、newValueとoldValueオブジェクト。 「change」、「slideStart」、「slideStop」イベントはマウスの移動時にトリガーされることに注意してください（なぜこれが適切な実装方法であるのかを尋ねたとき、私にとっては少し奇妙に見えます）。次に例を示します。

$('#your-slider').slider().on('change', function(event) {
    var a = event.value.newValue;
    var b = event.value.oldValue;

    var changed = !($.inArray(a[0], b) !== -1 && 
                    $.inArray(a[1], b) !== -1 && 
                    $.inArray(b[0], a) !== -1 && 
                    $.inArray(b[1], a) !== -1 && 
                    a.length === b.length);

    if(changed ) {
        //your logic should be here
    }
});

注意：[2、1]と[1、2]は、スライダーペアを交換できるため、等しいと見なされます。

6
Anton Lyhin

私のようなあなたのために機能が機能しなかった場合、これを試してください

$('#yourSlider').bind("slideStop", function (e)

5
TomerMahari

変更イベントの代わりに、スライドを使用します。プロモーターはうまく機能していないため、Slideで再び値を設定できます。

        var thresholdSlider = $('#Threshold');
        thresholdSlider.slider({
            formater: function (value) {
                return 'Current value: ' + value;
            }
        });

        thresholdSlider.slider().on('slide', function (ev) {
            thresholdSlider.slider('setValue', ev.value);
        });
1
Mohammad Karimi