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.