Измените слайдер jQuery UI на «noUiSlider» - функция, которая обновляет слайдер в процессе анимации

У меня есть анимация GSAP, которая обновляет слайдер jquery UI, когда анимация воспроизводится, а слайдер может контролировать ход анимации... Пример здесь

Мне нужно переключиться на noUiSlider по разным причинам, и я не могу понять, как заставить его работать. Вот мой код пользовательского интерфейса jQuery:

 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" и как я могу его преобразовать. Любые предложения будут высоко ценится!