I want to track a dynamic value of an input using jquery and trigger events depending on the progression (25%, 50%, 75% and 100%). In my case, the input is a progress bar: Progress bar

Here is the html code, knowing that aria-valuetext is dynamic:

<input tabindex="0" type="range" aria-hidden="false" aria-label="slide progress" aria-valuetext="30%">

To do so, I use the MutationObserver interface:

//Select the target node
const target = document.querySelector("[aria-valuetext]");
//create an observer instance
const observer = new MutationObserver(function(mutations, e){
    let videoProgress = Math.round($("[aria-valuetext]").val()/1000);
    if(videoProgression == 25){console.log('Progression:', videoProgression);
        console.log('Video action: Progression 25%');}
    if(videoProgression == 50){console.log('Progression:', videoProgression);
        console.log('Video action: Progression 50%');}
    if(videoProgression == 75){console.log('Progression:', videoProgression);
        console.log('Video action: Progression 75%');}
    if(videoProgression == 100){console.log('Progression:', videoProgression);
        console.log('Video action: Progression 100%');}
});
const config = {attributes: true, childlist: true, characterData: true};
observer.observe(target, config);

My issue is that the events are fired multiple times. I tried to use preventDefault and StopImmediatePropagation without any result.