HTML and CSS Reference
In-Depth Information
function updateRangeValue() {
document.getElementById("RangeValue").value
= document.getElementById("Range").value;
}
</script>
The
updateRangeValue()
function takes the current value of the range control
and stores it in the text box. Also, the
configureRange()
function that is called
when the page is loaded, calls
updateRangeValue()
to set its initial value.
3.
Now you'll need to call the
updateRangeValue()
function whenever the range
control is updated. To do that, add the code in bold to the
Page_Load()
event
handler in the
Feedback.aspx.cs
code-behind file:
4.
public partial class Feedback : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Range.Attributes.Add("onChange", "updateRangeValue()");
}
}
5.
Save your changes and execute the page. As you move the slider, the selected value
is displayed as shown in Figure
2-23
. Notice that it is updated in increments of 20
(if the step attribute is still set at 20).
Figure 2-23.
Displaying the range value
Summary
In this chapter you created a basic ASP.NET web form application using the template provided by Visual Studio.
After briefly trying out the email control you then created a feedback page that demonstrated each of the other
input types. Using some simple JavaScript, you configured the range control and provided a real-time display of
its value.
Along the way I also provided some useful information regarding the development environment including:
•
Configuring browsers to test with
•
Using the Page Inspector
•
Accessing the default SQL Server database
HTML5Test.com
web site to research browser support
•
Using the
