jQuery UI滑块(以编程方式设置)

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

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

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

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

也没有帮助。

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

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

如果是要更改的当前范围中的值,则应使用.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}); 

对我来说,这完全触发了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); 触发之前。 否则滑块处理程序将不会与值同步。

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

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

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

马尔的答案是唯一的工作对我来说(也许jqueryUI已经改变),这是一个处理范围的变种:

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

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

将滑块行为应用于元素

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

设置滑块值

 s.slider('value',10); 

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

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

我想更新滑块以及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() ); }); 

@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。 希望这可以帮助别人。

如果您需要从多个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/

这里是工作版本:

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