How to disable the slider in bootstrap-slider.js?

Question

is there any solution to stop the drag and drop when button clicked.

the documentation does not give a proper description

http://www.eyecon.ro/bootstrap-slider/

 $("#stopDrag").click(function(){ }); 

DEMO http://jsfiddle.net/sweetmaanu/npGw2/

Answer 1

Extend the slider plugin with the on and off function, for example:

 <script src="/slider/js/bootstrap-slider.js"></script> <script> $.fn.slider.Constructor.prototype.disable = function () { this.picker.off(); } $.fn.slider.Constructor.prototype.enable = function () { if (this.touchCapable) { // Touch: Bind touch events: this.picker.on({ touchstart: $.proxy(this.mousedown, this) }); } else { this.picker.on({ mousedown: $.proxy(this.mousedown, this) }); } } </script> 

Demo: http://bootply.com/83445

Html example :

 <div class="container" style="background-color:darkblue;"> <br> <input id="slide" type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="vertical" data-slider-selection="after"> <button id="enable">Enable</button> <button id="disable">Disable</button> </div> 

javascript example:

 $('#slide').slider(); $('#enable').click(function(){ $('#slide').slider('enable') }); $('#disable').click(function(){ $('#slide').slider('disable') }); 

Answer 2

Slider disable functionality is implemented by setting the data-slider-enabled attribute to true or false .

So, you can implement a disabled slider as follows:

 <input id="slide" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/> 

Or the included slider:

 <input id="slide" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="true"/> 

You can also enable and disable sliders using jQuery:

 $("#slide").slider(); $("#slide").slider("enable"); $("#slide").slider("disable"); 

Or like this with pure JavaScript:

 var slide = new Slider("#slide"); slide.enable(); slide.disable(); 

For your implementation, you will need to do this:

 $("#stopDrag").click(function(){ $("#slide").slider("disable"); }); 

Answer 3

You need to bind mouseenter / mouseleave events to show / hide the tooltip:

 $.fn.slider.Constructor.prototype.disable = function() { this.picker.off(); } $.fn.slider.Constructor.prototype.enable = function() { if (this.touchCapable) { // Touch: Bind touch events: this.picker.on({ touchstart: $.proxy(this.mousedown, this), mouseenter: $.proxy(this.showTooltip, this), mouseleave: $.proxy(this.hideTooltip, this) }); } else { this.picker.on({ mousedown: $.proxy(this.mousedown, this), mouseenter: $.proxy(this.showTooltip, this), mouseleave: $.proxy(this.hideTooltip, this) }); } } 

Answer 4

Just create a custom css class in the slider container that manages mouse events using event pointers. Then it just adds or removes it in your javascript code.

CSS will look something like this:

 #container { pointer-events:auto; } #container.slider-unavailable { pointer-events:none; } 

You only need to work on adding / removing a class in the slider container element. Especially nice with angular, where your code is just something like this:

 <div class="container" ng-class="{'class1 class2 class3':true, 'slider-unavailable':sliderIsUnavailable}"> <input id="slide" type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="vertical" data-slider-selection="after"><br> <label>Slider is unavailable: <input type="checkbox" ng-model="sliderIsUnavailable"> </label><br> </div>