如何判断输入范围元素在拖动时是增加还是减少

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?

Answer 1

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)">