HTML and CSS Reference
In-Depth Information
A slider, with scripted output
We've seen <input type=range> , so let's code up an example
that actually shows the user the range allowed by the slider by
automatically showing the minimum and maximum values, and
dynamically outputting the current value of the slider.
The slider will go from 1 to 11, as all good controls should (be
they for guitar amps or otherwise). The step will be 1, which is
the default, so we can omit that attribute.
<input type=range min=1 max=11 name=tap>
To s h To w t h e u s e r t h e m i n i m u m a n d m a x i m u m v a l u e s , w e
use generated content (which doesn't work on sliders in
WebKit browsers):
input[type=range]::before {content: attr(min);}
input[type=range]::after {content: attr(max);}
This will show the values, and style them as defi ned in CSS.
For example, Figure 3.10 renders:
input[type=range]{width:500px; color:red; font-family:
¬ cursive; font-size:2em;}
FIGURE 3.10 Opera's rendering
of <input type=range> with
min and max values generated.
We'll echo the current value of the slider with the new output
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 can be similarly associated with a form to pro-
vide feedback to a user.
We tie it to the slider by the name of the slider (name=tap), and
the onforminput event. When the output's form owner receives
input (as the slider is moved) we'll echo back the value of
that input:
<output onforminput=”value=tap.value”>5</output>
The actual contents of the output element (in this case, “5”) are
only shown before the slider is changed. You should take care
to ensure that this value is the same as any value attribute of
the associated input fi eld. In this example, the value=... part sets
Search WWH ::

Custom Search