9

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

JS：

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

安慰：

100

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

4

6 回答 6

16

你只需要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/

于 2013-12-30T09:18:52.380 回答
9

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

   $("#slider").slider('setAttribute', 'max', maxVal);
   $("#slider").slider('setAttribute', 'min', minVal);
   $("#slider").slider('refresh');
于 2015-01-26T13:17:57.597 回答
4

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

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

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);
于 2015-01-13T13:23:23.650 回答
1 
$slider = $('#slider');

// Apply max to redraw slider
$slider.slider({ max: value });
于 2017-05-30T11:23:46.543 回答
0

您可以做的最好的事情是设置最小值和最大值并重新应用该值。您可以通过几种方式做到这一点。但我所做的是创建一个 setMax 和 setMin 扩展方法来设置最小值和最大值。唯一的问题是我需要更改插件以扩展 $this 而不是 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 重新做布局。

于 2014-04-17T08:58:29.233 回答