Повзунок jQuery UI (програмне налаштування)

Я хотів би змінити повзунки на льоту. Я намагався зробити це за допомогою

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

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

Одна частина рішення @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()Код скидає дані, але не призначений для користувача інтерфейс в моєму сценарії. Сподіваюся, це допомагає іншим.

Можна вручну активувати такі події:

Застосувати поведінку повзунка до елемента

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

...

Встановіть значення повзунка

s.slider('value',10);

Викликати подію слайда, передаючи об'єкт інтерфейсу користувача

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

У моєму випадку з повзунком jquery з 2 ручками працював лише наступний спосіб.

$('#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 ("оновити");

Ось робоча версія:

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