jQuery UI 滑块（以编程方式设置）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2833396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Slider (setting programmatically)
提问by jAndy
I'd like to modify the sliders on-the-fly. I tried to do so by using
我想即时修改滑块。我试图通过使用这样做
$("#slider").slider("option", "values", [50,80]);
This call will set the values, but the element will not update the slider positions. Calling
此调用将设置值，但元素不会更新滑块位置。打电话
$("#slider").trigger('change');
does not help either.
也没有帮助。
Is there another/better way to modify the value AND slider position?
是否有另一种/更好的方法来修改值和滑块位置？
回答by alexteg
It depends on if you want to change the sliders in the current range or change the range of the sliders.
这取决于您是要更改当前范围内的滑块还是更改滑块的范围。
If it is the values in the current range you want to change, then the .slider() method is the one you should use, but the syntax is a bit different than you used:
如果它是您想要更改的当前范围内的值，那么 .slider() 方法是您应该使用的方法，但语法与您使用的有点不同：
$("#slider").slider('value',50);
or if you have a slider with two handles it would be:
或者，如果您有一个带有两个手柄的滑块，它将是：
$("#slider").slider('values',0,50); // sets first handle (index 0) to 50
$("#slider").slider('values',1,80); // sets second handle (index 1) to 80
If it is the range you want to change it would be:
如果它是您要更改的范围，它将是：
$("#slider").slider('option',{min: 0, max: 500});
回答by sakhunzai
For me this perfectly triggers slide event on UI Slider :
对我来说，这完美地触发了 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 });
Don't forget to set value by hs.slider('option', 'value',h);before the trigger. Else slider handler will not be in sync with value.
不要忘记hs.slider('option', 'value',h);在触发器之前设置值。否则滑块处理程序将不会与值同步。
One thing to note here is that his index/position (not value) in case you are using html select.
这里要注意的一件事h是索引/位置（不是值），以防您使用 html select。
回答by Mal
None of the above answers worked for me, perhaps they were based on an older version of the framework?
以上答案都不适合我，也许它们基于旧版本的框架？
All I needed to do was set the value of the underlying control, then call the refresh method, as below:
我需要做的就是设置底层控件的值，然后调用refresh方法，如下：
$("#slider").val(50);
$("#slider").slider("refresh");
回答by bentwonk
Mal's answer was the only one that worked for me (maybe jqueryUI has changed), here is a variant for dealing with a range:
Mal 的答案是唯一对我有用的答案（也许 jqueryUI 已更改），这是处理范围的变体：
$( "#slider-range" ).slider('values',0,lowerValue);
$( "#slider-range" ).slider('values',1,upperValue);
$( "#slider-range" ).slider("refresh");
回答by globalSchmidt
One part of @gaurav solution worked for jQuery 2.1.3 and JQuery UI 1.10.2 with multiple sliders. My project is using four range sliders to filter data with this filter.js plugin. Other solutions were resetting the slider handles back to their starting end points just fine, but apparently they were not firing an event that filter.js understood. So here's how I looped through the sliders:
@gaurav 解决方案的一部分适用于带有多个滑块的 jQuery 2.1.3 和 JQuery UI 1.10.2。我的项目使用四个范围滑块通过这个 filter.js 插件过滤数据。其他解决方案将滑块手柄重置回它们的起始端点就好了，但显然它们没有触发 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]
}
);
});
The hs.slider()code resets the data, but not the UI in my scenario. Hope this helps others.
该hs.slider()代码重置在我的方案中的数据，而不是用户界面。希望这对其他人有帮助。
回答by Human
If you need change slider values from several input, use it:
如果您需要从多个输入更改滑块值，请使用它：
html:
html：
<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>
js:
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());
});
回答by anonymous
It's possible to manually trigger events like this:
可以手动触发这样的事件：
Apply the slider behavior to the element
将滑块行为应用到元素
var s = $('#slider').slider();
...
...
Set the slider value
设置滑块值
s.slider('value',10);
Trigger the slide event, passing a ui object
触发slide事件，传递一个ui对象
s.trigger('slide',{ ui: $('.ui-slider-handle', s), value: 10 });
回答by Ashish Agarwal
I wanted to update slider as well as the inputbox. For me following is working
我想更新滑块以及输入框。对我来说，以下是有效的
a.slider('value',1520);
$("#labelAID").val(1520);
where ais object as following.
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() );
});
回答by Jonzi
In my case with jquery slider with 2 handles only following way worked.
在我的情况下，带有 2 个句柄的 jquery 滑块只能按照以下方式工作。
$('#Slider').slider('option',{values: [0.15, 0.6]});
回答by Vijay Chauhan
Finally below works for me
最后下面对我有用
$("#priceSlider").slider('option',{min: 5, max: 20,value:[6,19]}); $("#priceSlider").slider("refresh");
$("#priceSlider").slider('option',{min: 5, max: 20,value:[6,19]}); $("#priceSlider").slider("刷新");
