Bootstrap滑块更改值处理程序

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");
});

- Lys777

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

演示示例

- Felix

---

谢谢。我知道我可以像这样绕过去，只是希望有一种方法来触发通常的变更处理程序，可能是我漏掉了什么。 :) 如果不可能的话，我将使用这个选项。谢谢！ - Lys777

@Lys777 我相信在 Bootstrap 滑块中没有 change 事件，因为我已经多次阅读了他们的所有文档 :) - Felix

小心！当前'change', 'slideStart', 'slideStop'的实现在鼠标移动时会被触发。我询问为什么会有这种意外的实现，答案是插件工作的方式如此。 - Anton Lyhin

非常感谢您的回答。我之前在滑动滑块时使用了 Ajax 调用，但每个点都会触发一次 Ajax 调用。现在，在这个解决方案的帮助下，滑块停止后只会触发一次 Ajax 调用。 - Jay Dharmendra Solanki

@Felix - 我应该怎么做才能为滑动条上的可点击事件执行操作？ - Mohamed Thasin ah

Answer 2

对于 range: 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] 被视为相等，因为滑块对可以互换。

- Anton Lyhin

---

这应该是正确的答案。如果我只是点击Ticker，“slideStart”和“slideStop”将触发我的代码。“change”仅在值发生更改后才起作用。 - Nox

Answer 3

如果像我一样，on函数无法正常工作，请尝试以下方法：

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

- TomerMahari

---

当我不想再调用slider()函数时，这对我非常完美地起作用。 - Cameron Forward

Answer 4

我刚刚试图自己解决这个问题，这是我用jQuery找到的解决方案，当滑块移动时：

$('#sliderAdminType').on('input', function() {
   console.log($('#sliderAdminType').val());
});

这是我找到部分答案的资源： codegrepper.com

- Jessy Perreault

Answer 5

不要使用改变事件，而是使用滑动。推广者效果不佳，所以在滑动中可以再次设置值。

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

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

- Mohammad Karimi