Javascript 带输入的NoUISlider绑定

我使用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>

var skipSlider3=document.getElementById（'rangesliderPP'）；
var pointstopredicts=document.getElementById（'pointstopredicts'）；
创建（skipSlider3{
开始：[6]，
连接：'下'，
范围：{
"min":1,，
“最大”：24
}
});
skipSlider3.noUiSlider.on（'update'，函数（值，句柄）{
var值=值[句柄]；
pointstopredicts.value=Math.round（值）；
});
pointstopredicts.addEventListener（'change'，function（）{
skipSlider3.noUiSlider.set（[null，this.value]）；
});

当我更改输入的值时，我可以看到更改事件触发器，但也会触发nouislider的更新事件，这会导致输入返回其旧值。根据nouislider

set

的文档，事件不应触发

Update

事件。我错过什么了吗

---

JS Fiddle:

将值设置为滑块时删除“null”

应该是这样的：

   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]);
      });

---

抱歉，late刚刚错过了勾选答案，当我有多个起点时如何设置值？（多量程）