Bootstrap Slider更改值处理程序

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

小提琴演示

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

尝试这个，如果在function上对你不适合我

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

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