I have bootstrap slider. It works perfectly, Currently my slider event works when I change the value by dragging action. But How to add event for when I click on the slider bar?

myHtml:

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

myJs:

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

I have bootstrap slider. It works perfectly, Currently my slider event works when I change the value by dragging action. But How to add event for when I click on the slider bar?

myHtml:

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

myJs:

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

• javascript
• jquery
• twitter-bootstrap
• slider

2 Answers 2

You should check the documentation of the slider on the link below if you didn't yet.

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

You could see all events you need to check if the value is changed.

For click events over the slider you can use "change" or "slideStop" event.

When "change" event is used "event.value" returns an object with 2 properties: "oldValue" and "newValue";

Here you are the examples:

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

It's the same with mon Jquery doing.

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

I try it, and it works well. Here is my example :

https://jsfiddle/453krf90/