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

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

如果是您要更改的当前范围内的值,则应使用.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); 在触发之前。否则,滑块处理程序将与值不同步。

这里要注意的一点是 h 是索引/位置(不是值),以防使用HTML select .

以上所有答案对我都不起作用,也许它们是基于旧版本的框架?

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

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

@gaurav解决方案的一部分用于jquery 2.1.3和jquery ui 1.10.2,带有多个滑块。我的项目使用四个范围滑块过滤数据 this filter.js plugin . 其他解决方案正在将滑动手柄重置回其起始端点,但显然它们没有触发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。希望这能帮助别人。

我想更新slider和inputbox。 对我来说,跟随是有效的

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

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

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/

在我的例子中,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>

以下是工作版本:

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