web-dev-qa-db-de.com

Bootstrap Slider-Änderungshandler

Ich verwende Bootstrap Slider, und ich habe mich gefragt, ob es einen Weg gibt, einen Handler für eine Wertänderung hinzuzufügen. Ich sehe, dass die Dokumentation Handler für SlideStart, Slide und SlideStop enthält, aber keine für "change" (Wert).

Es ist möglich, dass sie den Schieberegler herumschieben und (beim Loslassen) auf den gleichen Wert gelangen. In diesem Fall möchte ich NICHT, dass das Ereignis ausgelöst wird. Nur wenn sie auf einen neuen Wert verschoben werden.

Ich habe es versucht:

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

und

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

und

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

und

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

Sie können die folgenden Schritte ausführen:

1) Verwenden Sie das Ereignis slideStart, um den ursprünglichen Wert Ihres Schiebereglers zu erhalten

2) Verwenden Sie das Ereignis slideStop, um den neuen Wert Ihres Schiebereglers zu erhalten

3) Vergleichen Sie diese beiden Werte. Wenn es sich unterscheidet, lösen Sie Ihren Code aus

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

28
Felix

Die akzeptierte Antwort gilt nicht für den Schieberegler range: true

Hier ist ein Doppel-Slider-Check: https://jsfiddle.net/oayj5Lhb/

Für Doppelschieberegler: Das "change" -Ereignis gibt sowohl newValue - als auch oldValue - Objekte zurück. Denken Sie daran, dass die Ereignisse 'change', 'slideStart', 'slideStop' werden bei Mausbewegungen ausgelöst (wenn ich fragte, warum die Antwort "dies ist der richtige Weg der Implementierung" ist) mir sieht es ein bisschen seltsam aus). Hier ein Beispiel:

$('#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
    }
});

Bitte beachten Sie: [2, 1] und [1, 2] gelten als gleich, da das Schiebereglerpaar austauschbar sein kann.

6
Anton Lyhin

versuchen Sie dies, wenn die Funktion für Sie wie mich nicht funktioniert hat

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

5
TomerMahari

Verwenden Sie statt eines Änderungsereignisses einfach die Folie. Der Promoter funktioniert nicht gut, daher können Sie in Slide erneut einen Wert festlegen.

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

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