HTML and CSS Reference
In-Depth Information
FIguRE 3.12
Opera's
rendering of
<input
type=range>
with
min
and
max
values generated.
1
11
We'll echo the current value of the slider with the new
output
element.
The <output> element
The
<output>
element is for showing results of some calculation
or other with script. It can have a form owner, either by being
inside a form or via a form attribute. The new
<progress>
and
<meter>
elements discussed earlier can be similarly associated
with a form to provide feedback to the user.
We tie it to the slider by the name of the slider (name=tap), and
use the
oninput
event on the containing form. When the output's
form owner receives input (as the slider is moved), we'll echo
back the value of that input:
// this example assumes variable output contains the DOM
¬ output element
// and the variable slider contains the DOM input range
¬ element
<form oninput=”output.value=slider.value”>
<input id=slider type=range min=1 max=5 value=5>
<output id=output>5</output>
</form>
The actual contents of the output element (in this case, “5”) is
only there as a starting value, to be shown before the slider
is actually changed. In this simple example, we simply put the
“5” in the markup, as it's the same starting value as the input
type=range
. You could, of course, use a script that runs
onload
and programmatically prefills the output with the value of its
associated input.
NoTE
The first edition
of this topic used
onforminput
rather than
the
oninput
event, but
that's deprecated. Markup
history buffs can read
for more.
Using WAI-ARIA for transitional accessibility
Although we said that
<input type=range>
removed responsibil-
ity for accessibility from the developer, that's true only when
HTML5 is widely supported and assistive technology under-
stands this new type of form input.
