Java Reference
In-Depth Information
<body>
<form name="form1">
<p>
<label for="minValue">Min: </label>
<input type="number" id="minValue" name="minValue" />
</p>
<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>
<p>
<input type="range" id="slider" name="slider" />
</p>
</form>
<div id="output"></div>
<script>
var myForm = document.form1;
var output = document.getElementById("output");
function formInputChange() {
var slider = myForm.slider;
slider.min = parseFloat(myForm.minValue.value);
slider.max = parseFloat(myForm.maxValue.value);
slider.step = parseFloat(myForm.stepValue.value);
output.innerHTML = slider.value;
}
myForm.addEventListener("input", formInputChange);
</script>
</body>
</html>
Save this as
ch11 _ example10.html
.
When you open this page in a modern browser, you will see three text boxes and one slider. The three
text boxes enable you to edit the minimum, maximum, and step of the slider. Providing any input to
any of the form fields updates the
min
,
max
, and
step
properties of the slider, as well as displays the
value
of the slider in a
<div/>
element.
There is one exception: In IE, changing the value of the slider does not cause the
input
event to fire.
Let's first look at the form's HTML:
<form name="form1">
<p>
<label for="minValue">Min: </label>
<input type="number" id="minValue" name="minValue" />
</p>