Get the value of a slider while moving it?
I am good with some basic web front-end technologies - Bootstrap, jQuery, HTML5 canvas, and I would like to be able to update the dimensions of the sine wave I draw when the slider moves, not when it is released (which is 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>
+3
source to share
3 answers
A simple way to 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 will remove the attributes onChange
:
<input type="range" id="ampSlider" min="-200" max="200" step="5">
<input type="range" id="freqSlider" min="1" max="400" step="5">
0
source to share