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
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.
Inside the head tag add the following code shown in bold:
<head runat="server">
<script type="text/javascript">
function configureRange() {
var range = document.getElementById("Range");
range.min = 0;
range.max = 200;
range.step = 20;
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 .)
Search WWH ::

Custom Search