1

我有引导滑块。它工作得很好，目前我的滑块事件在我通过拖动操作更改值时工作。但是当我点击滑块时如何添加事件？

我的HTML：

<div class="slider warning " style="padding-right: 20px;">
        <label style="font-family: 'Open Sans';padding-top: 10px;">Variants</label><div style="text-align: center" id='res1'>0</div><br>
        <input type="text"  id="variantslider" class="slider-element form-control" value=""  data-slider-value="20" data-slider-step="1" data-slider-max="20" data-slider-min="1" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="hide" >
</div>

我的：

$('#variantslider').slider().on('slideStart', function(ev){
    originalVal = $('#variantslider').data('slider').getValue();
});

//Catch slider stop event and capture value
$('#variantslider').slider().on('slideStop', function(ev){
    $('#variantslider').slider().on('slideStop', function(ev){
        var newVal = $('#variantslider').data('slider').getValue();
        //detect if slider value has been changed
        if(originalVal != newVal) {
            //my ops
        }
    });
});
4

2 回答 2

6

如果您还没有，您应该在下面的链接中查看滑块的文档。

https://github.com/seiyria/bootstrap-slider

您可以查看需要检查值是否已更改的所有事件。

对于滑块上的点击事件，您可以使用“change”或“slideStop”事件。

当使用“change”事件时，“event.value”返回一个具有 2 个属性的对象：“oldValue”和“newValue”；

以下是示例：

$("#variantslider").slider();

$("#variantslider").on("slideStop", function(event){
   console.log('slider value: ', event.value);
});

$("#variantslider").on("change", function(event){
   console.log('slider value: ', event.value.oldValue, event.value.newValue);
});
于 2019-07-03T18:37:00.607 回答
2

与常见的 Jquery 相同。

$("#variantslider").on("click", function(){
    alert(" I'm clicked! ");
});

我试了一下，效果很好。这是我的例子：

https://jsfiddle.net/453krf90/

于 2018-07-16T06:54:46.760 回答