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:

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

Victor Akimov · Accepted Answer · 2014-01-08T11:33:38.127

16

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/

edited Jan 08 '14 at 11:33

answered Dec 30 '13 at 09:18

Victor Akimov

531
4
9

1

i think the latest version, you need to do `$slider.data('slider').options.max = 13` – Asad Palekar Jun 25 '18 at 10:52
@AsadPalekar yes, thx, but it seems that you still need to reset the value to the same as the current one in order to adjust the position of the handler http://jsfiddle.net/5ks6gmoL/ – Victor Akimov Dec 24 '18 at 09:33

score 10 · Answer 2 · answered Jan 26 '15 at 13:17

10

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');

answered Jan 26 '15 at 13:17

Atomic Star

5,427
4
39
48

score 4 · Answer 3 · answered Aug 12 '13 at 18:41

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);
}

score 2 · Answer 4 · edited Jan 13 '15 at 14:04

2

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

edited Jan 13 '15 at 14:04

Raja Simon

10,126
5
43
74

answered Jan 13 '15 at 13:23

Juliet

31
2

score 1 · Answer 5 · answered May 30 '17 at 11:23

1

$slider = $('#slider');

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

answered May 30 '17 at 11:23

Ravi Shankar

153
1
5

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Badacadabra May 30 '17 at 13:12
actually this is a single one that worked :) – Beliaev Maksim Nov 19 '21 at 16:31

score 0 · Answer 6 · answered Apr 17 '14 at 08:58

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()));
            });

i.e. 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.

bootstrap-slider change max value

6 Answers6