How can I detect state of boostrap slider?

Question

I am using this library : https://github.com/seiyria/bootstrap-slider

I have my slider:

<input id="months" data-slider-id='monthsSlider' type="text" data-slider-min="5" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="square" />

How can I detect when user clicks on slider handle and move it?

Answer 1

Here are the Events.

Events

slide
This event fires when the slider is dragged

slideStart
This event fires when dragging start

slideStop This event fires when the dragging stops or has been clicked on

change
This event fires when the slider value has changed

slideEnabled
This event fires when the slider is enabled

slideDisabled

This event fires when the slider is disabled

so, you can use:-

$('#months').on('slide', function(slideEvt) {
    var newValue = slideEvt.value;
});

Answer 2

All you need to do is include their file to your page. rest will be taken care of as defined in their example page :

###################
       HTML
###################

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>



###################
    JavaScript
###################

// With JQuery
$('#ex1').slider({
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});

// Without JQuery
var slider = new Slider('#ex1', {
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});


###################
       CSS
###################

#ex1Slider .slider-selection {
    background: #BABABA;
}

Answer 3

You can do this by using the event slide (Example 6)

$('#ex6').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
}).on('slide', function() {
  $('#ex6SliderVal').html(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.13/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.13/bootstrap-slider.min.js"></script>

<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3" />
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>