Input Rangeslider update progress keeps triggering input event on Howler js seek()

Question

A: I want to update the progress bar & handle of my audio player as the audio plays.

B: I also want to drag the handle to different positions of the audio.

I'm using Howler.js for my audio, and rangeslider.js for my input range slider.

Currently i can get both functions A&B to work, but not together, in other words I can only use one code block if I comment out the other.

Reason: I know its doing this because I am firing events on the same element

$("#playerRangeSlider")

I tried maybe trying to do a "mousedown"event on one code block and "input" on the other, but "mousedown" is not working as expected.

I'm using

requestAnimationFrame(updateTimeline);

basically constantly checking the value of the range slider and updating the handle and progress position.

// Update the timeline (time elapsed etc.)
 $rangeslider = $("#playerRangeSlider");
 var updateTimeline = function() {

`requestAnimationFrame(updateTimeline)`;
 if(currentAudioPlaying) {
  var sliderCurrentValue = currentAudioPlaying.seek();
   $rangeslider.val(sliderCurrentValue).change();
 }
 };

The problem is that I have another function that gets the current position of the audio whenever the slider handle is dragged,(in other words when on('input')) is triggered thus:

$rangeslider.on("input", function(){
seekSong(afterPausePlaySong);
 });

function seekSong (callback) {
$songCurrentTime = $(".songSlider").val();
$newCurentTmeValue = ($songCurrentTime / $max) *    currentAudioPlaying.duration();
currentAudioPlaying.pause();
cb = callback.bind();
cb();
}

function afterPausePlaySong() {
 currentAudioPlaying.seek($newCurentTmeValue).play();
}

looks like a constant loop from requestAnimationFrame(updateTimeline) is keeping me from even being able to drag the handle, yet still triggers the seekSong() function