javascript - 如何为 Bootstrap slider 添加 onclick 功能？

Question

我有 Bootstrap slider 。它工作得很好，目前，当我通过拖动操作更改值时，我的 slider 事件起作用。但是当我点击 slider 时如何添加事件？

我的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>

我的Js:

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

Answer 1

如果您还没有检查过，您应该检查下面链接上的 slider 文档。

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

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

对于 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);
});