NoUISlider Bind с вводом

Question

NoUISlider Bind с вводом

1

Я использую noUISlider, чтобы позволить пользователю вводить номер. Он работает нормально, но теперь я хочу добавить ввод, чтобы иметь возможность обновлять значение nouislider, не перетаскивая его. Но некоторые, как я не могу заставить его работать. Ниже приведен код моего кода:

  <div class="col-sm-1">
      <input type="number" min="1" max="24" step="1" class="form-control input-sm" name="pointstopredicts" id="pointstopredicts" value="10" required="true" />
   </div>
   <div class="col-sm-9">
      <div id="rangesliderPP"></div>
   </div>

И ниже мой код JS:

<script>
   var skipSlider3 = document.getElementById('rangesliderPP');
   var pointstopredicts = document.getElementById('pointstopredicts');
   noUiSlider.create(skipSlider3, {
     start: [ 6 ],
     connect: 'lower',
      range: {
        'min': 1,
        'max': 24
      }
   });
   skipSlider3.noUiSlider.on('update', function( values, handle ) {
        var value = values[handle];
      pointstopredicts.value = Math.round(value);
     });

     pointstopredicts.addEventListener('change', function(){
        skipSlider3.noUiSlider.set([null, this.value]);
      });
 </script>

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

JS Fiddle: https://jsfiddle.net/rehanazher/8bcx0uvp/

Rehan Azher 10 июнь 2018, в 14:48

Источник

Теги:

javascript

html5

nouislider

1 ответ

Ещё вопросы

iStepashka · Accepted Answer · 2018-06-10T17-50-00.000Z

удалите 'null'when значение настройки для ползунка.

должно быть таким:

   noUiSlider.create(skipSlider3, {
     start: [ 6 ],
     connect: [true,false],
     step: 1,
      range: {
        'min': 1,
        'max': 24
      }
   });
   skipSlider3.noUiSlider.on('update', function( values, handle ) {
        var value = values[handle];

      pointstopredicts.value = Math.round(value);
     });

     pointstopredicts.addEventListener('change', function(){
        skipSlider3.noUiSlider.set([ this.value]);
      });

Извините, опоздал только что пропустил галочку в ответе
Как установить значения, когда у меня есть несколько начальных точек? (мульти диапазон)