bootstrap-slider更改最大值

Question

我目前正在使用Twitter bootstrap-slider库，并且一直试图弄清楚如何在初始化滑块后更改最大值。 关于如何检索值的这个问题有一些帮助，但我仍然找不到确切的调用方法。 这是我到目前为止所尝试的内容：

JS：

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

安慰：

100

设置$('#slider').data('slider').max value也不会改变滑块本身的范围，即使该值已经改变。 任何有关设置最大值或重新初始化滑块的帮助都将非常感激!!

Answer 1

你只需要在改变$('#slider').data('slider').max之后应用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/

Answer 2

您需要调用refresh方法 。 以下代码可以解决问题：

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

Answer 3

我有同样的问题，我找到的最佳解决方案是销毁滑块并在需要更改范围值时重新创建它。 这有点棘手，因为：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);
}

Answer 4

我努力使这个与各种示例一起工作，并最终使用这种语法对其进行排序，我在需要时将其添加到我的函数中。

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

您可以做的最好是设置最小值和最大值并重新应用该值。 你可以通过几种方式实现这一目标。 但我所做的是创建一个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事件中设置第二个滑块的最小值和最大值。 然后再次调用setValue来重新进行布局。

Answer 6

$slider = $('#slider');

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