twitter-bootstrap 引导滑块更改最大值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17335373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap-slider change max value
提问by Wei Hao
I am currently using the Twitter bootstrap-sliderlibrary, 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 valuewas of some help, but I still cannot find the exact method to call. Here's what I have been trying so far:
我目前正在使用 Twitter bootstrap-slider库，并且一直试图弄清楚如何在滑块初始化后更改最大值。这个关于如何检索值的问题有一些帮助，但我仍然找不到确切的调用方法。到目前为止，这是我一直在尝试的：
JS:
JS：
$('#slider').slider({
max: 100
});
$('#slider').slider({
max: 200
});
console.log($('#slider').data('slider').max)
Console:
安慰：
100
Setting the $('#slider').data('slider').maxvalue 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!!
$('#slider').data('slider').max直接设置值也不会改变滑块本身的范围，即使值已经改变。任何有关设置最大值或重新初始化滑块的帮助将不胜感激！
回答by Victor Akimov
You just need to apply setValueafter you'v changed $('#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);
回答by Ewald Stieger
You need to call the refresh method. The following code does the trick:
您需要调用refresh 方法。以下代码可以解决问题：
$("#slider").slider('setAttribute', 'max', maxVal);
$("#slider").slider('setAttribute', 'min', minVal);
$("#slider").slider('refresh');
回答by JonHollander
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.
我遇到了同样的问题，我找到的最佳解决方案是销毁滑块并在需要更改范围值时重新创建它。这有点棘手，因为：1) 移除滑块也会移除原始锚标记；和 2) 您需要保存旧滑块的 css 宽度并将其用于新滑块。
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:
HTML：
<div id="sliderDiv">
<input id="mySlider" type="text" data-slider-tooltip="show"/>
</div>
Javascript:
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);
}
回答by Juliet
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);
回答by Ravi Shankar
$slider = $('#slider');
// Apply max to redraw slider
$slider.slider({ max: value });
回答by Ewert
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.
您能做的最好的事情是设置最小值和最大值并重新应用该值。您可以通过几种方式做到这一点。但是我所做的是创建一个 setMax 和 setMin 扩展方法来设置最小值和最大值。唯一的问题是我需要更改插件以扩展 $this 而不是 this，因为我的 setMin 和 setMax 扩展方法不可用。
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)
...在图书馆。如果您想添加自己的扩展方法。但是，您仍然必须在扩展方法的库中或外部执行 setValue 。（setValue 对滑块手柄的位置和滑块的布局进行计算）
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.
即在第一个滑块的 slideStop 事件上设置第二个滑块的最小值和最大值。然后再次调用 setValue 重新进行布局。
