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>
Search WWH ::




Custom Search