Ползунок диапазона пользовательского интерфейса Jquery со связанными событиями ввода текста (ошибка) - PullRequest
Новая
       8

Ползунок диапазона пользовательского интерфейса Jquery со связанными событиями ввода текста (ошибка)

1 голос
/ 09 мая 2011

У меня на сайте есть бегунок диапазона для минимальных и максимальных ценовых диапазонов.По обе стороны от ползунка есть два поля ввода текста.Я создал функцию обратного вызова с помощью ползунка, которая регулирует значения текстовых полей на основе изменения значений в ползунке.

В то же время я также хотел бы настроить значения ползунка на основе изменений в значениях текстовых полей.Прямо сейчас событие изменения (также пробовавшего keyup), которое я связываю с текстовыми вводами, не изменяет значения (положение) двух стрелок диапазона.Что здесь не так? 

$('.price_slider').slider({orientation:"horizontal",range:true, animate:200,min:0,max:10000, step:100,value:0,values:[{{min_rent}},{{max_rent}}], slide:function(event,ui){
    $('input#lower_bound').val(ui.values[0]);
    $('input#upper_bound').val(ui.values[1]);
    }
    });


$('input#lower_bound').change(function(){
    $('.price_slider').slider("values",[$(this).val(),$('input#upper_bound').val()]);
});


$('input#upper_bound').change(function(){
    $('.price_slider').slider("values",[$('input#lower_bound').val(),$(this).val()]);
});

РЕДАКТИРОВАТЬ -

Мэтт, я видел вашу ревизию.Просто любопытно, если ваша версия более эффективна, чем моя.Мой, кажется, работает, но я явно не эксперт: 

    $lower.add($upper).change(function () {
    var lowEnd=parseInt($lower.val());
    var highEnd=parseInt($upper.val());

    if(highEnd>lowEnd){
        $slider.slider('values', 0, parseInt($lower.val(), 10));
        $slider.slider('values', 1, parseInt($upper.val(), 10));
    }
    else{
        $slider.slider('values', 0, parseInt($lower.val(), 10));
        $slider.slider('values', 1, parseInt($lower.val(), 10));
        $upper.val([$lower.val()]);
    }   
});

Ответы [ 2 ]

4 голосов
/ 09 мая 2011

Согласно документации jQuery UI , slider('values') принимает индекс в качестве второго параметра и значение в качестве третьего. Попробуйте это: 

$('input#lower_bound').change(function(){
    $('.price_slider').slider("values",0,$(this).val());
    $('.price_slider').slider("values",1,$('input#upper_bound').val());
});


$('input#upper_bound').change(function(){
    $('.price_slider').slider("values",0,$('input#lower_bound').val());
    $('.price_slider').slider("values",1,$(this).val());
});
3 голосов
/ 09 мая 2011

  • Для ползунков с несколькими ручками вам нужно использовать 'values' вместо 'value' (что вы делаете), но 'values' принимает этот формат: 

    .slider( "values" , index , [value] )

  • Возможно, вы захотите применить max >= min при установке значений ползунка на основе текстовых полей.

  • Вы неправильно передаете начальные значения в .slider(), я незнаете, откуда взялась эта {{...}} ерунда (это шаблон jQuery?).
  • Обычно не очень хорошая идея использовать подчеркивания в именах классов .Используйте - вместо _.

Исправления: 

var $slider = $('.price-slider'),
    $lower = $('#lower_bound'),
    $upper = $('#upper_bound'),
    min_rent = 1000,
    max_rent = 9000;

$lower.val(min_rent);
$upper.val(max_rent);

$('.price-slider').slider({
    orientation: 'horizontal',
    range: true,
    animate: 200,
    min: 0,
    max: 10000,
    step: 100,
    value: 0,
    values: [min_rent, max_rent],
    slide: function(event,ui) {
        $lower.val(ui.values[0]);
        $upper.val(ui.values[1]);
    }
});

$lower.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    low = Math.min(low, high);
    $lower.val(low);
    $slider.slider('values', 0, low);
});

$upper.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    high = Math.max(low, high);
    $upper.val(high);
    $slider.slider('values', 1, high);
});

Демо: http://jsfiddle.net/mattball/pLP2e/

...