2015-07-15 2 views
0

У меня есть следующие настройки слайдера:Как обновить JQuery щ состояние слайдера, когда происходит внешнее событие

$("#slider-range100").slider({ 
      range: true, 
      min: 5, 
      max: 90, 
      values: [7, 35], 
      slide: function (event, ui) { 
       $("#1amount100").val(ui.values[0]); 
       $("#2amount100").val(ui.values[1]); 

      } 
     }); 

Теперь вводит $("#1amount100") и $("#2amount100") освежает при перемещении ползунка.

Я хочу также обновить состояние ползунка, когда я изменяю значения входов.

Может ли это использовать слайдер jquery ui?

ответ

1

Вы можете добавить слушателя на входах, чтобы вызвать изменение в слайдере. Это грубый пример, но вы могли бы сделать следующее:

$slider = $("#slider-range100"); //cache your slider 
$("#1amount100").change(function() { 

     //when the first input changes, update the LEFT value of the slider only 
     $slider.slider("option", "values", 
     [ this.value, $slider.slider("option", "values")[1] ]); 

    }); 

$("#2amount100").change(function() { 

     //when the first input changes, update the RIGHT value of the slider only 
     $slider.slider("option", "values", 
     [ $slider.slider("option", "values")[0], this.value ]); 

    }); 

(Вы, очевидно, необходимо скорректировать для типов ввода, которые он может получить Кроме того, вам нужно контролировать на основе пользовательского изменения входного против Jquery основе. изменение ввода, иначе он может перейти в цикл. Я начал с того, чтобы вести вас с помощью isUserChange)

+0

Как получить доступ к объекту слайдера? – gstackoverflow

+0

Ссылка на него как на любой объект jQuery. Я переделал, чтобы показать на основе вашего существующего ID –

+0

Я попытался вызвать ** $ («# ползунок-диапазон100»). Слайдер («значение», 12); ** слайдер не изменит состояние – gstackoverflow

Смежные вопросы