bootstrap-slider-change-event

by Nayana Das

HTML

<link rel="stylesheet" href="https://rawgit.com/seiyria/bootstrap-slider/master/dependencies/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/seiyria/bootstrap-slider/master/dist/css/bootstrap-slider.css">
<script src="https://rawgit.com/seiyria/bootstrap-slider/master/dependencies/js/jquery.min.js"></script>
<script src="https://rawgit.com/seiyria/bootstrap-slider/master/dist/bootstrap-slider.js"></script>
<!-- Range slider, low track: -->
<input id="your-slider" type="text" style="padding-left:200px;"/>

JavaScript

// Without JQuery
//$("#your-slider").slider({ id: "slider12a", min: 0, //max: 10, value: 5 });
$("#your-slider").slider({ id: "slider12b", min: 0, max: 10, value: 7 });

$('#your-slider').slider().on('change', function(event) {
    var a = event.value.newValue;
    var b = event.value.oldValue;

    var changed = !($.inArray(a[0], b) !== -1 && 
                    $.inArray(a[1], b) !== -1 && 
                    $.inArray(b[0], a) !== -1 && 
                    $.inArray(b[1], a) !== -1 && 
                    a.length === b.length);

    if(changed ) {
        console.log('changed'+a);
    }
});