如何为引导滑块添加 onclick 功能？

Question

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

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

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

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

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

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

当使用“change”事件时，“event.value”返回一个具有两个属性的对象：“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);
});