HTML and CSS Reference
In-Depth Information
4.
Now that the function has been implemented, you need to tell the page to execute it.
To do that, add the following code in bold to the body tag:
<body
onload="configureRange()"
>
<form id="form1" runat="server">
This instructs the page to call the
configureRange()
function when the
OnLoad
event occurs.
5.
6.
Save your changes and press F5 to load the page.
7.
The range control will look just like it did before but when you move the slider it will
only stop where the tick marks are.
■
by default, tick marks are displayed at 10% increments along the range control. Since the total range is
200 and the step is 20, the steps are also at 10% increments so they coincide with the tick marks. Try changing the
step to 5 and you should also have three stops between each tick mark.
Tip
Displaying the Range Value
While you're working on the range control I want to show you a simple trick to display its value. You'll add a
TextBox control next to the range control and then use JavaScript to update its value when the range control is
modified.
eXerCISe 2-4. DISpLaYING the raNGe VaLUe
In the
Feedback.aspx
page, add the following code in bold to the range item:
1.
<li>
<asp:Label ID="lblRange" runat="server"
AssociatedControlID="Range">Overall satisfaction</asp:Label>
<asp:TextBox runat="server" ID="Range" TextMode="Range"
Width="200" Height="30"></asp:TextBox>
<asp:TextBox runat="server" ID="RangeValue" Width="50"></asp:TextBox>
</li>
2.
Next, add the code in bold to the script section:
<script type="text/javascript">
function configureRange() {
var range = document.getElementById("Range");
range.min = 0;
range.max = 200;
range.step = 20;
updateRangeValue();
}
