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

Question

我想即时修改滑块。我尝试使用

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

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。

Answer 3

以上答案都不适合我，也许它们是基于旧版本的框架？

我只需要设置底层控件的值，然后调用刷新方法，如下：

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

Answer 4

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

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

Answer 5

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

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 6

@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。希望这对其他人有帮助。

Answer 7

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

将滑块行为应用于元素

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

...

设置滑块值

s.slider('value',10);

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

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

Answer 8

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

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 9

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

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

Answer 10

这对我有用，但它是一个自定义实现。

设置滑块值

  $('#slider-width').slider('values', 0, range[ 0 ]);
  $('#slider-width').slider('values', 1, range[ 1 ]);
  setSliderHandles('width', range[ 0 ], range[ 1 ]);

移动手柄到位

  function setSliderHandles(type, min, max){
    $('#slider-' + type + ' span.ui-slider-handle:eq(0) .price-range-min').html(min + '"');
    $('#slider-' + type + ' span.ui-slider-handle:eq(1) .price-range-max').html(max + '"');
    $('#slider-' + type + ' span.price-range-both').html('<i>' + min + '" - </i>' + max + '"');
    
    if ( min == max ) {
      $('#slider-' + type + ' span.price-range-both i').css('display', 'none');
      $('#single_' + type).val(min);
    } else {
      $('#slider-' + type + ' span.price-range-both i').css('display', 'inline');
      $('#single_' + type).val('');
    }

    if (collision($('#slider-' + type + ' span.price-range-min'), $('#slider-' + type + ' span.price-range-max')) == true) {
        $('#slider-' + type + ' span.price-range-min, #slider-' + type + ' span.price-range-max').css('opacity', '0');  
        $('#slider-' + type + ' span.price-range-both').css('display', 'block');        
    } else {
        $('#slider-' + type + ' span.price-range-min, #slider-' + type + ' span.price-range-max').css('opacity', '1');  
        $('#slider-' + type + ' span.price-range-both').css('display', 'none');     
    }        
  }

function collision($div1, $div2) {
    var x1 = $div1.offset().left;
    var w1 = 40;
    var r1 = x1 + w1;
    var x2 = $div2.offset().left;
    var w2 = 40;
    var r2 = x2 + w2;
      
    if (r1 < x2 || x1 > r2) return false;
    return true;
}

Answer 11

启动或刷新时值 = 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>

Answer 12

下面终于对我有用了

$("#priceSlider").slider('option',{min: 5, max: 20,value:[6,19]}); $("#priceSlider").slider("refresh");

Answer 13

这是工作版本：

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