问题:

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

<input type="range" id="ampSlider" min="-200" max="200" step="5" onchange="refreshGraph()"> <input type="range" id="freqSlider" min="1" max="400" step="5" onchange="refreshGraph()"> <canvas id="graphCanvas" width="1000" height="600"></canvas>  <script>     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 < canvas.width; n += 5)         {             context.lineTo(n, amp * Math.sin(Math.PI * n / freq) + y);         }          context.stroke();     } </script>

回答1:

use oninput instead of onchange

回答2:

Try using onmousemove in addition to onchange.

回答3:

Easy way do it with jQuery:

$("#ampSlider").bind("change", function() {     drawGraph($("#ampSlider").val(), $("#freqSlider").val()); });  $("#freqSlider").bind("change", function() {     drawGraph($("#ampSlider").val(), $("#freqSlider").val()); });

and of course you'd then remove your onChange attributes:

<input type="range" id="ampSlider" min="-200" max="200" step="5"> <input type="range" id="freqSlider" min="1" max="400" step="5">

转载请标明出处:Get value of slider while it's being moved?

文章来源: Get value of slider while it's being moved?

标签

slider

context