how to tell if an input range element is increasing or decreasing while dragging

Question

So I have some <input type="range"> elements that I need to know if the value is increasing or decreasing while the user is dragging the range slider. So far all I've been able to find/implement are things that use when a user first touches or releases the slider and compare the current changing value to that last number, but that won't work because it can't compensate for when the user is still dragging.

Is there a way to achieve this using just JS math?

Jimenemex · Accepted Answer · 2018-04-30T21:19:44.507

I found out from this post that it's not what it seems in regards to capturing the onInput or onChange events. To capture every movement of the slider use onInput. Below is the differences illustrated.

You can do your same logic as you thought, of saving the last value, then checking if the current is less or greater then the last to see if it's increasing or decreasing.

EDIT: Notice that if you use the arrow keys to move the slider, both events get triggered at the same time. If you use the mouse, both will get triggered only when you stop moving, and let go of the mouse button.

var lastNum = 0;
function onInput(value) {
  if(lastNum < value) {
      console.log("increasing");
  } else {
      console.log("decreasing");
  }
  lastNum = value;
  console.log("onInput: " + value);
}

function onChange(value) {
  console.log("onChange: " + value);
}

<input type="range" oninput="onInput(this.value)" onchange="onChange(this.value)">

wow! looks like I was over complicating things. I thought about keeping track of previous changes, but not as straightforward as this. thanks — zero, Apr 30 '18 at 21:07
@zero I was also keeping track of changes, but only the last change. So you were right in the beginning. — Jimenemex, Apr 30 '18 at 21:18

how to tell if an input range element is increasing or decreasing while dragging

1 Answers1