我目前正在使用 Twitter bootstrap-slider 库，并且一直在尝试弄清楚如何在滑块初始化后更改最大值。这个关于如何retrieve the value 的问题有一些帮助，但我仍然找不到确切的调用方法。到目前为止，这是我一直在尝试的：
JS：
$('#slider').slider({
max: 100
});
$('#slider').slider({
max: 200
});
console.log($('#slider').data('slider').max)
控制台：
100
直接设置$('#slider').data('slider').max值也不会改变滑块本身的范围，即使值已经改变了。任何有关设置最大值或重新初始化滑块的帮助将不胜感激！
【问题讨论】：
标签： javascript twitter-bootstrap slider
您只需在更改$('#slider').data('slider').max后申请setValue
$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);
【讨论】：
$slider.data('slider').options.max = 13
您需要拨打refresh method。以下代码可以解决问题：
$("#slider").slider('setAttribute', 'max', maxVal);
$("#slider").slider('setAttribute', 'min', minVal);
$("#slider").slider('refresh');
【讨论】：
我遇到了同样的问题，我找到的最佳解决方案是销毁滑块并在需要更改范围值时重新创建它。这有点棘手，因为：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);
}
【讨论】：
我努力让它与各种示例一起工作，最终用这种语法对其进行了排序，我在需要的地方添加到我的函数中。
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);
【讨论】：
$slider = $('#slider');
// Apply max to redraw slider
$slider.slider({ max: value });
【讨论】：
您可以做的最好的事情是设置最小值和最大值并重新应用该值。您可以通过几种方式做到这一点。但我所做的是创建一个 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 重新做布局。
【讨论】：