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

上述答案都没有对我有用，也许它们是基于旧版本的框架？

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

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

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

将滑块行为应用于元素

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

...

设置滑块值

s.slider('value',10);

触发幻灯片事件，传递ui对象

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

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

我想更新滑块以及输入框。对我来说正在工作

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 8

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

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 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');

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

13 个答案: