Несколько ползунков с двумя числовыми входами - PullRequest
Новая
       18

Несколько ползунков с двумя числовыми входами

0 голосов
/ 07 июня 2018

Я пытаюсь заставить noUiSlider работать с одним классом в нескольких местах на одной странице.Прямо сейчас у меня есть 2 ползунка, оба работают нормально, за исключением странного поведения, когда я изменяю значение второго ввода, это фактически обновляет первый дескриптор и ввод.Буду благодарен, если кто-нибудь мне поможет.

JSFiddle 

function bindValues(price_slider, inputNumberMin, inputNumberMax){
       price_slider.noUiSlider.on('update', function( values, handle ) {
        var value = values[handle];

        if ( handle ) {
            inputNumberMax.value = Math.round(value);
        } else {
            inputNumberMin.value = Math.round(value);
        }
      });
      inputNumberMin.addEventListener('change', function(){
          price_slider.noUiSlider.set(this.value);
      });
      inputNumberMax.addEventListener('change', function(){
          price_slider.noUiSlider.set(this.value);     
      });

  }
  var price_sliders = $('.price-filter');
  var inputsNumberMin = $('.price-filter-min-price');
  var inputsNumberMax = $('.price-filter-max-price');
  for ( var i = 0; i < price_sliders.length; i++ ) {
      noUiSlider.create(price_sliders[i], {
          start: [0, 100],
          connect: true,
          range: {
              'min': 0,
              'max': 100
          }
      });
      bindValues(price_sliders[i], inputsNumberMin[i], inputsNumberMax[i]);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css" rel="stylesheet"/>

<div class="price-filter"></div>
<input type="number" class="price-filter-min-price">
<input type="number" class="price-filter-max-price">
<div class="price-filter"></div>
<input type="number" class="price-filter-min-price">
<input type="number" class="price-filter-max-price">

1 Ответ

0 голосов
/ 07 июня 2018

Ваша проблема заключается в следующем: 

  inputNumberMin.addEventListener('change', function(){
      price_slider.noUiSlider.set(this.value);
  });
  inputNumberMax.addEventListener('change', function(){
      price_slider.noUiSlider.set(this.value); // <<< here   
  });

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

price_slider.noUiSlider.set([null, this.value]); // 'null' values are ignored.

Обновленная скрипта:

http://jsfiddle.net/leongersen/z83oz9np/268/

...