Помогите исправить баг со слайдером для аудио-плеера

Делаю аудио-плеер. Использую слайдер для переключения времени. Вот в чем проблема: когда музыка на паузе, то все ок, но когда играет, то слайдер при использовании дергается.

HTML:

<input type="range" min="1" max="100" value="1" class="progress-slider slider">

CSS:

.slider {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px #fff solid;
    border-radius: 5px;
    height: 10px;
    overflow: hidden;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    /* border: #222 2px solid; */
    /* border-radius: 50%; */
    cursor: pointer;
    background: #fff;
    box-shadow: -407px 0 0 400px #fff;
    z-index: 999;
}

JS:

function formatTime(timeInSeconds) {
    const minutes = Math.floor(timeInSeconds / 60);
    const seconds = Math.floor(timeInSeconds % 60);
    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

function updateProgress(e) {
    const { duration, currentTime } = e.srcElement;
    const progressPercent = (currentTime / duration) * 100;
    // progressSlider.value = `${progressPercent}`;
    progressSlider.value = progressPercent;

    progressCurrent.innerHTML = formatTime(audio.currentTime);
    //progressEnd.innerHTML = formatTime(duration);
}

audio.addEventListener('timeupdate', updateProgress);

function setProgress(e) {
    // const width = this.clientWidth;
    // const clickX = e.offsetX;
    const duration = audio.duration;

    // audio.currentTime = (clickX / width) * duration;
    const progressValue = progressSlider.value;
    audio.currentTime = (progressValue / 100) * duration;
}

// progressContainer.addEventListener('change', setProgress);
progressSlider.addEventListener('change', setProgress);