Java Reference
In-Depth Information
<p>
<label for="maxValue">Max: </label>
<input type="number" id="maxValue" name="maxValue" />
</p>
<p>
<label for="stepValue">Step: </label>
<input type="number" id="stepValue" name="stepValue" />
</p>
You start with three <input/> elements of type number . Their purpose is to allow you to specify the
minimum, maximum, and step values of the fourth <input/> element:
<p>
<input type="range" id="slider" name="slider" />
</p>
</form>
This is a range <input/> element, and there are no attributes other than type , id , and name .
Outside of the form is a <div/> element with an id of output :
<div id="output"></div>
As you input data in the form, the contents of this <div/> element change with the value of the
range <input/> element.
Now for the JavaScript. The first two lines of JavaScript code reach into the DOM and grab references
to two elements:
var myForm = document.form1;
var output = document.getElementById("output");
The first is a reference to the <form/> element, and the second is the <div id="output"/> element.
To make this example work, you listen for the myForm object's input event. So, next you call myForm
.addEventListener() to register the listener:
myForm.addEventListener("input", formInputChange);
The formInputChange() function executes when the input event fires, and in its first line of code, you
create a variable called slider to contain the range <input/> element:
function formInputChange() {
var slider = myForm.slider;
This is for convenience purposes because every statement in this function will reference the slider
element in some way.
Next, you want to modify the slider's min , max , and step properties with the data entered into the form:
slider.min = parseFloat(myForm.minValue.value);
slider.max = parseFloat(myForm.maxValue.value);
slider.step = parseFloat(myForm.stepValue.value);
Search WWH ::




Custom Search