Javascript 从jQuery UI滑块更改为'；noUiSlider'；-用于在动画进度上更新滑块的函数

我有一个GSAP动画，在动画播放时更新jquery UI滑块，滑块可以控制动画进度

由于各种原因，我需要切换到，但我不知道如何使它工作。以下是我的jQuery UI代码：

 totalProgressSlider = $("#totalProgressSlider").slider({
        range: false,
        min: 0,
        max: 100,
        step:.1,
        slide: function ( event, ui ) {
            tl.totalProgress( ui.value/100 ).pause();
        }
    }); 

function updateUI() {
    totalProgressSlider.slider("value", tl.totalProgress() *100);
}  

$("#slider").slider({
  range: false,
  min: 0, 
  max: 100, 
  step:.1,
  slide: function ( event, ui ) {
   tl.pause();
   tl.progress( ui.value/100 ); 
    }
}); 

function updateSlider() {
  $("#slider").slider("value", tl.progress() *100);
}       

这是我到目前为止的noUiSlider代码：

$(".slider").noUiSlider({
  range: [ 10, 50 ],
  start: [ 2, 40 ],
  step: 1,
  handles: 1,
  slide: function(){
    /* ... */
},

  set: function(){
    /* ... */
}

  }).change( function(){
    /* ... */
  });


function updateUI() {
     $("#slider").slider();
}  

---

我想我真的不明白什么是“事件，ui”和“ui.value/100”，以及如何转换它。任何建议都将不胜感激

为什么不使用Greensock的可拖动工具：

您可以通过可拖动实例轻松更新tween/时间线，反之亦然，通过tween更新可拖动实例

请看以下代码：

---

Rodrigo.

谢谢你的回复-我也在GSAP论坛上发布了：-我不知道如何实现这一点以满足我的需要。