CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapslider
Rachana Ramchand
Rachana Ramchand

Reputation: 49

Locking/disabling bootstrap numeric slider

I'm currently using http://www.eyecon.ro/bootstrap-slider/ and would like to know how to disable/ lock the slider. 

<th>    <b>0%</b> <input type="text" class="spiders" value="" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" 

      data-slider-value="43.7" 
         id="sldid7" > <b> 100%</b>  </th>

By retrieving the sliders name dynamically, trying to lock the slider. Trying to lock it some way like this, but its not working.

$( '#'+$(this).prop('id') ).slider().Disable()

Upvotes: 3

Views: 1880

Answers (1)

Brian Frisch
Brian Frisch

Reputation: 507

I think you would need to develop this feature yourself. It shouldn't be that difficult. Looking at the source code, you could add an extra property called disabled, which would be a boolean.

In the constructor I would add the following (the last line in my example is my addition):

this.min = this.element.data('slider-min')||options.min;
this.max = this.element.data('slider-max')||options.max;
this.step = this.element.data('slider-step')||options.step;
this.value = this.element.data('slider-value')||options.value;

this.disabled = this.element.data('slider-value')||options.disabled; // My addition

Then in Slider.prototype I would add the new disabled-boolean:

over: false,
inDrag: false,
disabled: false, // our new property

Below that you could add a couple of methods that could handle the enabling/disabling of the control:

enable: function(){
    this.disabled = false;
},

disable: function(){
    this.disabled = true;
},

Now, in each of the methods that handles the events which moves the knobs in the slider, we want them to know, that they should do nothing. Therefore in the methods:

mousedown: function(ev) {
...
mousemove: function(ev) {
...
mouseup: function(ev) {

I would include the following in the top of the methods:

if (this.disabled){
    return false;
}

This should in theory be enough to provide the features you wanted. I haven't tested it though. I just listed it here to give you some pointers and some sort of idea about how to provide the feature yourself.

I hope it can help you get closer to your goal.

Upvotes: 2

Related Questions