web-dev-qa-db-fra.com

Gestionnaire de valeur de changement du curseur Bootstrap

J'utilise Bootstrap Slider, et je me demandais s'il est possible d'inclure un gestionnaire pour un changement de valeur. Je vois que la documentation inclut des gestionnaires pour slideStart, slide et slideStop, mais aucun pour "changer" (de valeur).

Il est possible qu'ils glissent le curseur et se retrouvent sur la même valeur (à la libération), auquel cas je ne voudrais PAS que l'événement se déclenche. Seulement s'ils le glissent à une nouvelle valeur.

J'ai essayé:

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

et

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

et

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

et

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

Vous pouvez effectuer les étapes suivantes:

1) Utilisez l'événement slideStart pour obtenir la valeur d'origine de votre curseur

2) Utilisez l'événement slideStop pour obtenir la nouvelle valeur de votre curseur

3) Comparez ces deux valeurs, si elles sont différentes, lancez votre code

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 Démo

28
Felix

La réponse acceptée n'est pas valide pour le curseur range: true

Voici la vérification à double curseur: https://jsfiddle.net/oayj5Lhb/

Pour le double curseur: l'événement "change" renvoie à la fois les objets newValue et oldValue. N'oubliez pas que les événements 'change', 'slideStart', 'slideStop' sont déclenchés lors du déplacement de la souris moi ça a l'air un peu étrange). Voici un exemple:

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

Veuillez noter que: [2, 1] et [1, 2] sont considérés comme égaux car la paire de curseurs peut être interchangeable.

6
Anton Lyhin

Au lieu de changer d'événement, utilisez simplement la diapositive. Le promoteur ne fonctionne pas bien, vous pouvez donc définir à nouveau la valeur dans 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
Mirak