Question

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

JS：

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

控制台：

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

Answer 1

您需要在更改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 method。以下代码可以解决这个问题：

   $("#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

chef-server-ctl user-create test test me test@gmail.com 'root123' --filename /tmp/chefuser.pem

bootstrap-slider更改最大值

6 个答案: