Bootstrap Slider更改值处理程序

Question

我正在使用Bootstrap Slider,我想知道是否有任何方法可以包含值更改的处理程序.我看到文档包括slideStart,slide和slideStop的处理程序,但没有"change"(值).

它们可能会滑动滑块并(在释放时)结束相同的值,在这种情况下我不希望事件触发.只有当他们将其滑动到新值时.

我试过了:

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

Answer 1

您可以执行以下步骤:

1)使用slideStart事件获取滑块的原始值

2)使用slideStopevent获取滑块的新值

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

小提琴演示

Answer 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]被认为是相同的,因为滑块对可以互换.

Answer 3

如果在功能上对我这样的人不起作用，请尝试

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