HTML and CSS Reference
In-Depth Information
Using the Range Control
The range control supports attributes that allow you to configure its behavior. For example, you can specify the
min
and
max
attributes that define the
value
of the field when the slider is at each end of the control. You can also
indicate the
step
attribute that controls stops along the scale where the slider can stop at. For example if the
min
is 0, the
max
is 100, and the
step
is 20, the control will only allow you to stop at increments of 20 (e.g. 0, 20, 40, 60,
80, and 100).
You would code this in HTML like this:
<!DOCTYPE html>
<input name="Range" type="range" id="Range"
min="0" max="200" step="20"
style="height:30px;width:200px;" />
Even though IntelliSense does not support these attributes, you could specify them and they would be
included in the final HTML. Another way to do this is to modify the control when the page is loaded using
JavaScript.
Modifying the Step Attribute
Now you'll write a simple script to configure the range attributes.
eXerCISe 2-3. MODIFYING the raNGe CONtrOL
Load the
Chapter
2
project in Visual Studio and open the
Feedback.aspx
page.
1.
Inside the
head
tag add the following code shown in bold:
<head runat="server">
<title></title>
<script type="text/javascript">
function configureRange() {
var range = document.getElementById("Range");
range.min = 0;
range.max = 200;
range.step = 20;
}
</script>
</head>
2.
3.
This simple JavaScript function modifies the attributes of the range control. The
document
property represents the HTmL document of the current page. The
getElementById()
function is a selector that returns the specified element,
the range control in this case. (I will cover selectors in JavaScript in more detail in
Chapter
5
.)
