O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – adding a volume control

Going back into the HTML, let's add a range input control to allow the user to change the volume. We will put it right under the sustain label and control we just added:

<label for="volume">Volume: </label>
<input type="range" id="volume" min="1" max="100" value="100" step="1" />

We define a label and a range input with an id attribute of volume. We set the range of the control from 1 to 100 with a step value of 1. We also default the value to 100.

Back in our PianoApp object we add another global variable named volume and set it to 1.0, the maximum volume, by default:

function PianoApp()
{
    var version = "6.3",
    // Code not shown...
    sustain = true,
    volume = 1.0;

Like the sustain checkbox, we need to add a

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required