NoUISlider Bind с вводом

Я использую 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/