變化 - 該功能可對動畫最新進展滑塊

我有一個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'以及我如何轉換這個。我們歡迎所有的建議！

來源

2013-12-13 dchadney