jQuery UI滑块（以编程方式设置）

我想快速修改滑块。 我试图通过使用

$("#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滑块上的滑动事件：

 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);来设置值hs.slider('option', 'value',h); 触发之前。 否则滑块处理程序将不会与值同步。

Answer 3

上面的答案都没有为我工作，也许他们是基于旧版本的框架？

我所需要做的就是设置底层控件的值，然后调用刷新方法，如下所示：

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

Answer 4

马尔的答案是唯一的工作对我来说（也许jqueryUI已经改变），这是一个处理范围的变种：

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

Answer 5

可以手动触发这样的事件：

将滑块行为应用于元素

 var s = $('#slider').slider(); 

…

设置滑块值

 s.slider('value',10); 

触发滑动事件，传递一个UI对象

 s.trigger('slide',{ ui: $('.ui-slider-handle', s), value: 10 }); 

Answer 6

我想更新滑块以及input框。 对我来说，以下是工作

 a.slider('value',1520); $("#labelAID").val(1520); 

其中a是对象如下。

  var a= $( "<div id='slider' style='width:200px;margin-left:20px;'></div>" ).insertAfter( "#labelAID" ).slider({ min: 0, max: 2000, range: "min", value: 111, slide: function( event, ui ) { $("#labelAID").val(ui.value ); } }); $( "#labelAID" ).keyup(function() { a.slider( "value",$( "#labelAID" ).val() ); }); 

Answer 7

@gaurav解决scheme的一部分适用于jQuery 2.1.3和带有多个滑块的JQuery UI 1.10.2。 我的项目使用四个范围滑块来过滤这个filter.js插件的数据。 其他的解决scheme是重新设置滑块手柄回到他们的起始点，但显然他们并没有发起一个事件，filter.js理解。 所以这里是我通过滑块循环：

 $("yourSliderSelection").each (function () { var hs = $(this); var options = $(this).slider('option'); //reset the ui $(this).slider( 'values', [ options.min, options.max ] ); //refresh/trigger event so that filter.js can reset handling the data hs.slider('option', 'slide').call( hs, null, { handle: $('.ui-slider-handle', hs), values: [options.min, options.max] } ); }); 

hs.slider()代码会重置数据，但不是我场景中的UI。 希望这可以帮助别人。

Answer 8

如果您需要从多个input中更改滑块值，请使用它：

HTML：

 <input type="text" id="amount"> <input type="text" id="amount2"> <div id="slider-range"></div> 

JS：

  $( "#slider-range" ).slider({ range: true, min: 0, max: 217, values: [ 0, 217 ], slide: function( event, ui ) { $( "#amount" ).val( ui.values[ 0 ] ); $( "#amount2" ).val( ui.values[ 1 ] ); } }); $("#amount").change(function() { $("#slider-range").slider('values',0,$(this).val()); }); $("#amount2").change(function() { $("#slider-range").slider('values',1,$(this).val()); }); 

https://jsfiddle.net/brhuman/uvx6pdc1/1/

Answer 9

这里是工作版本：

 var newVal = 10; var slider = $('#slider'); var s = $(slider); $(slider).val(newVal); $(slider).slider('refresh');