Обработчик значения сдвига ползунка Bootstrap

Я использую Bootstrap Slider, и мне было интересно, есть ли способ включить обработчик для изменения значения. Я вижу, что в документацию включены обработчики для слайд-старта, слайда и слайд-стопа, но нет для "изменения" (значения).

Возможно, что они могут скользить по ползунку и (после выпуска) заканчиваются на одном и том же значении, и в этом случае я НЕ хочу, чтобы событие срабатывало. Только если они сдвигают его до нового значения.

Я пробовал:

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

Ответ 1

Вы можете выполнить следующие действия:

1) Используйте slideStart событие, чтобы получить исходное значение вашего слайдера

2) Используйте событие slideStop, чтобы получить новое значение вашего слайдера

3) Сравните это два значения, если оно отличается от другого, а затем запустите свой код

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!');
    }
});

Скриншот Демо

Ответ 2

Принятый ответ недействителен для диапазона: 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] считаются равными, так как пара слайдеров может быть взаимозаменяема.

Ответ 3

попробуйте, если функция on не работает для вас вроде меня

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

Ответ 4

Вместо события изменения просто используйте слайд. Промоутер работает неправильно, поэтому в Slide вы можете снова установить значение.

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

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