jQuery UI Slider(以编程方式设置)

Question

我想在飞行中修改滑块.我尝试使用

$("#slider").slider("option", "values", [50,80]);

此调用将设置值,但元素不会更新滑块位置.调用

$("#slider").trigger('change');

也没有帮助.

是否有另一种/更好的方法来修改值和滑块位置？

Answer 1

这取决于您是否要更改当前范围中的滑块或更改滑块的范围.

如果它是您想要更改的当前范围中的值,则.slider()方法是您应该使用的方法,但语法与您使用的方法略有不同:

$("#slider").slider('value',50);

或者如果你有一个带有两个手柄的滑块,它将是:

$("#slider").slider('values',0,50); // sets first handle (index 0) to 50
$("#slider").slider('values',1,80); // sets second handle (index 1) to 80

如果它是您想要更改的范围,它将是:

$("#slider").slider('option',{min: 0, max: 500});

Answer 2

对我来说,这完美触发了UI Slider上的幻灯片事件:

hs=$('#height_slider').slider();
hs.slider('option', 'value',h);
hs.slider('option','slide')
       .call(hs,null,{ handle: $('.ui-slider-handle', hs), value: h });

不要忘记hs.slider('option', 'value',h); 在触发前设置值.否则滑块处理程序将不与值同步.

这里要注意的一点是,h如果你使用的是html ,那就是索引/位置(不是值)select.

Answer 3

上述答案都没有对我有用,也许它们是基于旧版本的框架？

我需要做的就是设置底层控件的值,然后调用refresh方法,如下所示:

$("#slider").val(50);
$("#slider").slider("refresh");

Answer 4

Mal的答案是唯一一个对我有用的答案(也许jqueryUI已经改变了),这里有一个处理范围的变体:

$( "#slider-range" ).slider('values',0,lowerValue);
$( "#slider-range" ).slider('values',1,upperValue);
$( "#slider-range" ).slider("refresh");