jQuery UI Slider（以编程方式设置）

我想即时修改滑块。我试图通过使用

$("#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 Slider上的slide事件：

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。

上面的答案对我都不起作用，也许它们是基于旧版本的框架？

我需要做的就是设置基础控件的值，然后调用refresh方法，如下所示：

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

Mal的答案是唯一对我有用的答案（也许jqueryUI已更改），这是处理范围的一种变体：

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

@gaurav解决方案的一部分适用于具有多个滑块的jQuery 2.1.3和JQuery UI 1.10.2。我的项目使用四个range滑块通过此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]
        }
    );

});

该hs.slider()代码重置数据，但不重置我的方案中的UI。希望这对其他人有帮助。

可以手动触发如下事件：

将滑块行为应用于元素

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

...

设置滑块值

s.slider('value',10);

触发滑动事件，传递ui对象

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

如果需要从多个输入更改滑块值，请使用它：

的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/

我想更新滑块以及输入框。对我来说，下面的工作

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()  );
        });

在我的情况下，带有2个句柄的jquery滑块只能按以下方式工作。

$('#Slider').slider('option',{values: [0.15, 0.6]});

在启动或刷新时值= 0（默认值）如何从http请求获取值

 <script>
       $(function() {
         $( "#slider-vertical" ).slider({
    animate: 5000,
    orientation: "vertical",
    range: "max",
    min: 0,
    max: 100,
    value: function( event, ui ) {
        $( "#amount" ).val( ui.value );

  //  build a URL using the value from the slider
  var geturl = "http://192.168.0.101/position";

  //  make an AJAX call to the Arduino
  $.get(geturl, function(data) {

  });
  },
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );

  //  build a URL using the value from the slider
  var resturl = "http://192.168.0.101/set?points=" + ui.value;

  //  make an AJAX call to the Arduino
  $.get(resturl, function(data) {
  });
  }
  });

$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );

});
   </script>

最后下面对我有用

$（“＃priceSlider”）。slider（'option'，{min：5，max：20，value：[6,19]}）;; $（“＃priceSlider”）。slider（“ refresh”）;

这是工作版本：

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