Make HTML slider not skip values when value is changed quickly-CodePudding

I'm working on a slider using and when I move the slider really fast from one side to the other it skips some of the values in the middle. How can I make it so that the slider increments through every value in the slider instead of skipping numbers in between?

CodePudding user response：

So, without having a code sample, I assume you bind an event handler to your slider element, that you drag, and that event handler executes on some onmousemove kinda event.

What you could try instead - push all of your events into stack, and pop from it until it is empty in some setInterval. This approach wouldn't be reactive, but it won't skip mousemove events.

CodePudding user response：

here is an option demonstrating how to use all the values inbetween and not skip and values... the problem is that when you make js calculate all the inbetween values, it will have trouble keeping the same speed.

const range = document.querySelector("input[type='range']");

let lastVal = range.value;
range.addEventListener("input", (e) => {
  const newVal = e.target.value;
  if ( 
    newVal == lastVal   1 ||
    newVal == lastVal - 1
  ) {
    console.log(newVal);
    lastVal = newVal;
    return;
  }
  if ( newVal > lastVal ) {
    while ( newVal > lastVal ) {
      lastVal  ;
      console.log(lastVal);
    }
    return;
  }
  if ( newVal < lastVal ) {
    while ( newVal < lastVal ) {
      lastVal--;
      console.log(lastVal);
    }
    return;
  }
});

<input type="range" min="0" max="100" />