bootstrap-slider change max value

Question

I am currently using the Twitter bootstrap-slider library, and have been trying to figure out how to change the max value after the slider has been initialized. This question on how to retrieve the value was of some help, but I still cannot find the exact method to call. Here's what I have been trying so far:

JS:

$('#slider').slider({
    max: 100
});
$('#slider').slider({
    max: 200
});
console.log($('#slider').data('slider').max)

Console:

100

Setting the $('#slider').data('slider').max value directly also does not change the range of the slider itself, even thought the value has changed. Any help on setting the max value or re-initializing the slider would be much appreciated!!

Answer 1

You just need to apply setValue after you'v changed $('#slider').data('slider').max

$slider = $('#slider');

// Get current value
var value = $slider.data('slider').getValue();
// should be:
// var value = $slider.slider('getValue');
// but it doesn't work

// Change max
$slider.data('slider').max = 13;

// Apply setValue to redraw slider
$slider.slider('setValue', value);

http://jsfiddle.net/23aPK/

Answer 2

You need to call the refresh method . The following code does the trick:

   $("#slider").slider('setAttribute', 'max', maxVal);
   $("#slider").slider('setAttribute', 'min', minVal);
   $("#slider").slider('refresh');

Answer 3

I had the same problem and the best solution I found was to destroy the slider and recreate it whenever I needed to change the range values. It's a little tricky because: 1) removing the slider also removes the original anchor tag; and 2) you need to save the css width of the old slider and use it for the new one.

Here's a simplified version of the code I used. If you have more than one slider on your page, then you'll need to be careful and only delete the one you need to update.

HTML:

<div id="sliderDiv">
    <input id="mySlider" type="text" data-slider-tooltip="show"/> 
</div>

Javascript:

//Call this function to create the slider for the first time 

function createSlider(minRange, maxRange){


   $('#mySlider').slider({
        min: minRange,
        max: maxRange,
    value: defaultValue
    }).on('slideStop', handleSliderInput);

}

//Call this function to destroy the old slider and recreate with new range values

function changeSliderRange(newMin, newMax){


    //Save old slider's css width
    var oldSliderWidth = $("#mySlider").css("width");

   //remove the old slider      
   $(".slider").remove();   

   //Recreate slider anchor tag with saved width value
   $("#sliderDiv").after("<input id='mySlider' type='text' style='display: none; width: "+ oldSliderWidth + ";'/>");

   //Now recreate the slider
   createSlider(newMin, newMax);
}

Answer 4

I struggled getting this to work with various examples and eventually sorted it with this syntax, which I added into my function where needed.

strMin=3;
strMax=5;

$("#myslider").data('slider').min=strMin;

$("#myslider").data('slider').max=strMax;

$("#myslider").data('slider').value="[" + strMin + "," + strMax + "]";

$("#myslider").data('slider').setValue([strMin,strMax],true);

Answer 5

The best you can do is set the min and max and re-apply the value. You can do this in a few ways. But what I did was to create a setMax and setMin extension method that sets the min and max. The only problem with this was I needed to change the plugin to extend $this instead of this, because my setMin and setMax extension methods wasn't available.

So change this...

$this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options))));

...to this...

$this.data('slider', (data = new Slider($this, $.extend({}, $.fn.slider.defaults,options))));

...in the library. If you want to add on your own extension methods. But then you still have to do setValue either in the library in your extension method or outside. (setValue does the calculation for the position of the slider handles and the layout of the slider)

So you can do something like this...

$('#sldOne').on('slideStop', function (ev) {
                $('#sldTwo').slider('setMin', 0);
                $('#sldTwo').slider('setMax', 4);
                $('#sldTwo').slider('setValue', new Number($('#sldTwo').val()));
            });

ie On the first slider's slideStop event set the min and max of the second slider. And then call setValue again to re-do the layout.

Answer 6

$slider = $('#slider');

// Apply max to redraw slider
$slider.slider({ max: value });