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

Share Improve this question Follow edited Jul 16, 2018 at 6:53 Simon.Lay 25822 silver badges1010 bronze badges asked Jul 16, 2018 at 5:48 Mohamed Thasin ahMohamed Thasin ah 11.2k1111 gold badges6464 silver badges119119 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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/