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>

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>

• javascript
• jquery
• html

• If you are using Bootstrap, there are some nice sliders out there with callbacks on slide events. E.g. seiyria.github.io/bootstrap-slider – mccannf Commented Aug 11, 2014 at 23:48

2 Answers 2

Use oninput instead of onchange

For example, a quick one liner utilizing this is as follows:

document.getElementById("myid").oninput = function() { console.log(this.value) };

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