JQuery UI Slider (настройка программно)

Ответ 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});

Ответ 2

Для меня это отлично запускает слайд-событие на слайдере интерфейса:

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); перед триггером. Обработчик слайдера Else не будет синхронизироваться со значением.

Следует отметить, что h - это индекс/позиция (не значение), если вы используете html select.

Ответ 3

Ни один из вышеперечисленных ответов не работал у меня, возможно, они были основаны на более ранней версии фреймворка?

Все, что мне нужно было сделать, это установить значение базового элемента управления, а затем вызвать метод обновления, как показано ниже:

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

Ответ 4

Ответ Mal был единственным, который работал у меня (возможно, jqueryUI изменился), вот вариант для работы с диапазоном:

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

Ответ 5

Можно вручную запускать такие события:

Примените поведение ползунка к элементу

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

...

Задайте значение ползунка

s.slider('value',10);

Запуск события слайда, передача объекта ui

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

Ответ 6

Одна часть решения @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]
        }
    );

});

Код hs.slider() сбрасывает данные, но не пользовательский интерфейс в моем сценарии. Надеюсь, это поможет другим.

Ответ 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()  );
        });

Ответ 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/

Ответ 9

В моем случае с jquery slider с 2 ручками работал только следующий способ.

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

Ответ 10

Наконец то ниже у меня работает

$ ("# priceSlider"). slider ('option', {min: 5, max: 20, value: [6,19]}); $ ( "# PriceSlider") слайдер ( "обновить").

Ответ 11

При запуске или обновлении value = 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>

Ответ 12

Вот рабочая версия:

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