CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapslider
Mohamed Thasin ah
Mohamed Thasin ah

Reputation: 11192

How to add onclick functionality for bootstrap slider?

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

Upvotes: 2

Views: 2716

Answers (2)

Christiyan
Christiyan

Reputation: 534

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

https://github.com/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);
});

Upvotes: 7

Simon.Lay
Simon.Lay

Reputation: 258

It's the same with common Jquery doing.

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

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

https://jsfiddle.net/453krf90/

Upvotes: 2

Related Questions