bootstrap-ползунок изменить максимальное значение

В настоящее время я использую Twitter bootstrap-slider библиотека, и пытались выяснить, как изменить максимальное значение после инициализации ползунка. Этот вопрос о том, как получить значение была некоторая помощь, но я все еще не могу найти точный метод для вызова. Вот что я пытался до сих пор:

JS:

$('#slider').slider({
    max: 100
});
$('#slider').slider({
    max: 200
});
console.log($('#slider').data('slider').max)
8
javascript slider twitter-bootstrap

6 ответов

вам просто нужно применить setValue после того, как вы изменили $('#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/

15

нужно позвонить метод Refresh. Следующий код делает трюк:

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

у меня была та же проблема, и лучшим решением, которое я нашел, было уничтожить слайдер и воссоздать его всякий раз, когда мне нужно было изменить значения диапазона. Это немного сложно, потому что: 1) удаление слайдера также удаляет исходный тег привязки; и 2) вам нужно сохранить ширину css старого слайдера и использовать его для нового.

вот упрощенная версия кода, который я использовал. Если у вас есть более одного слайдера на странице, вам нужно быть осторожным и удалять только тот, который вы нужно обновить.

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

Я изо всех сил пытался заставить это работать с различными примерами и в конечном итоге отсортировал его с этим синтаксисом, который я добавил в свою функцию, где это необходимо. 

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

лучшее, что вы можете сделать, это установить min и Max и повторно применить значение. Вы можете сделать это несколькими способами. Но я сделал это, чтобы создать метод расширения setMax и setMin, который устанавливает min и max. Единственная проблема заключалась в том, что мне нужно было изменить плагин, чтобы расширить $this вместо этого, потому что мои методы расширения setMin и setMax были недоступны.

чтобы изменить это...

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

...для этого...

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

...в библиотеке. Если хочешь ... добавить свои собственные методы расширения. Но тогда вам все равно нужно сделать setValue либо в библиотеке в вашем методе расширения, либо снаружи. (setValue делает расчет для положения ползунка ручки и макет ползунка)

Так что вы можете сделать что-то подобное...

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

т. е. на событии slideStop первого слайдера установите min и max второго слайдера. А затем снова вызовите setValue, чтобы повторно выполнить макет.

0
$slider = $('#slider');

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