从 jQuery UI 滑块更改为“noUiSlider” - 更新动画进度滑块的函数

Question

我有一个 GSAP 动画，它会在动画播放时更新 jquery UI 滑块，并且滑块可以控制动画进度...Example Here

由于各种原因，我需要切换到noUiSlider，但我不知道如何使它工作。这是我的 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”以及如何转换它。任何建议将不胜感激！

Answer 1

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

http://www.greensock.com/draggable/

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

看看这个代码笔：

http://codepen.io/rhernando/pen/Batoc

http://codepen.io/rhernando/pen/npBoF

罗德里戈。