CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapslidertwitter-bootstrap-3
Mo.
Mo.

Reputation: 27445

how to disable slider in bootstrap-slider.js?

is there any solution to stop dragging when click on the button.

the documentation do not give proper description

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

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

});

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

Upvotes: 10

Views: 18897

Answers (5)

d.popov
d.popov

Reputation: 4255

CSS:

.slider-disabled 
{
    pointer-events: none;
    opacity: 0.5;
}

Then to disable it, toggle 'slider-disabled' class as convenient (js, html, razor)

Upvotes: 0

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10588

The functionality to disable sliders has been implemented by setting the data-slider-enabled attribute to true or false.

So you can implement a disabled slider like this:

<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 an enabled slider like this:

<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 your sliders like this with 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 would need to do this:

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

Upvotes: 8

RedKen
RedKen

Reputation: 157

You need to bind the 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)
        });
    }
}

Upvotes: 1

Bass Jobsen
Bass Jobsen

Reputation: 49044

Extend the slider plugin with a enable and disable function like:

<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

Example html:

<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>

example javascript:

$('#slide').slider();

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

Upvotes: 18

MisterM71
MisterM71

Reputation: 11

Simply have a custom css class on the slider container which controls the mouse events with pointer-events. Then it is just about adding or removing it in your javascript code.

CSS would look like something like this

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

The you only have to work on adding/removing the class on the slider container element. It is particularly nice with angular where your code is simply 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>

Upvotes: 1

Related Questions