title: Range Slider oninput function doesn't execute when clicked and dragged
body: <p>I have a simple range slider defined as follows:</p>
  
  <pre><code>    &lt;input class="panning-control" type="range" min="0" max="100" step="1" value="0"&gt;
  </code></pre>
  
  <p>In the Javascript tag I declare </p>
  
  <pre><code>var panControl = document.querySelector('.panning-control');
  </code></pre>
  
  <p>and then have the following oninput function:</p>
  
  <pre><code>panControl.oninput = function() {
    //a bunch of irrelevant computations involving panControl.value
  }
  </code></pre>
  
  <p>The problem is that when I click and drag the slider quickly, the oninput function doesn't execute for each 'step'. for example if I clicked and dragged the slider from 0 to 50, the oninput function should theoretically execute 50 times, because step=1 and the slider went from 0 to 50. Right now, if you click and drag the slider it skips executing the function from most of the steps, and the calculations that I do in oninput done with the wrong numbers because each execution of the function depends on the computations done from the last execution. It does work if i just click on the slider once, and then use the left and right arrow keys to increment and decrement the slider. Does anyone have a solution for this? Is there another knob/control package that I can utilize?</p>