引导滑块更改值处理程序

Question

我正在使用 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");
});

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

Fiddle Demo

Answer 2

只使用幻灯片而不是更改事件。启动器效果不佳，因此您可以在 Slide 中重新设置值。

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

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

Answer 3

接受的答案对于 range: true 滑块

无效

这里是双滑块检查：https://jsfiddle.net/oayj5Lhb/

对于双滑块：“更改”事件返回 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 4

如果 on 功能不适合像我这样的你，试试这个

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