-1

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?

gna
  • 1
  • 1
    Can you please share the code you've written? – jessegavin Jun 08 '22 at 19:26
  • You mean the mouse move event doesn't have enough inbetween data? You probably want to adjust the code that uses the data from your event, and fills in the inbetween values. – async await Jun 08 '22 at 19:36
  • you can make the slider track have dozens of transparent divs along it's length, then use the divs' onmouseover event to register position changes. you draw the knob at the last hovered div, and give it a `pointer-events: none` CSS so that it doesn't interfere with the track section hovers. Then bolt on keyboard shortcuts to make it accessible, or offer fallback to an ``, which you can sync with the fake slider for AT. – dandavis Jun 08 '22 at 19:43

2 Answers2

1

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" />
async await
  • 1,967
  • 1
  • 8
  • 19
  • this might benefit from some [debouncing](https://stackoverflow.com/questions/24004791/what-is-the-debounce-function-in-javascript) – async await Nov 08 '22 at 21:28
0

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.

creage
  • 161
  • 4