title: Get value of slider while it's being moved?
body: <p>I'm messing around learning some basic front-end web technologies - Bootstrap, jQuery, HTML5 canvas - and I wanted to be able to update the dimensions of a sinusoid I'm drawing as the slider moves, not when it's released (how it currently works).</p>
  
  <pre><code>&lt;input type="range" id="ampSlider" min="-200" max="200" step="5" onchange="refreshGraph()"&gt;
  &lt;input type="range" id="freqSlider" min="1" max="400" step="5" onchange="refreshGraph()"&gt;
  &lt;canvas id="graphCanvas" width="1000" height="600"&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
      drawShape();
      drawGraph(200, 150);
      $("#ampSlider").val(200);
      $("#freqSlider").val(150);
  
      function refreshGraph()
      {
          console.log($("#ampSlider").val());
          drawGraph($("#ampSlider").val(), $("#freqSlider").val());
      }
  
      function drawGraph(amp, freq)
      {
          console.log("Drawing: " + amp + " | " + freq);
          var canvas = document.getElementById('graphCanvas');
          var context = canvas.getContext('2d');
          context.clearRect(0, 0, canvas.width, canvas.height);
          var y = canvas.height/2;
          context.lineWidth = 10;
          context.beginPath();
          context.moveTo(0, y);
  
          for(n = 0; n &lt; canvas.width; n += 5)
          {
              context.lineTo(n, amp * Math.sin(Math.PI * n / freq) + y);
          }
  
          context.stroke();
      }
  &lt;/script&gt;
  </code></pre>