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

Change from jQuery UI slider to 'noUiSlider' - Function that updates slider on animation progress

本文关键字：动画 更新 函数 用于 noUiSlider UI jQuery      更新时间：2023-09-26

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

由于各种原因，我需要切换到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();
}

我想我真的不明白"event，ui"answers"ui.value/100"是什么，以及如何转换它。任何建议都将不胜感激！

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

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

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

看看这个代码笔：

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

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

罗德里戈。

相关文章：