快速更改值時使 HTML 滑塊不跳過值

Question

我正在使用一個滑塊，當我將滑塊從一側快速移動到另一側時，它會跳過中間的一些值。 我怎樣才能使滑塊在滑塊中的每個值中遞增，而不是在兩者之間跳過數字？

Answer 1

因此，在沒有代碼示例的情況下，我假設您將事件處理程序綁定到您拖動的滑塊元素，並且該事件處理程序在某些onmousemove事件上執行。

你可以嘗試什么 - 將所有事件推入堆棧，然后從中彈出，直到它在某些setInterval中為空。 這種方法不會是被動的，但它不會跳過mousemove事件。

Answer 2

這是一個選項，演示如何使用中間的所有值而不是跳過和值......問題是當你讓 js 計算所有中間值時，保持相同的速度會遇到麻煩。

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