NOTE
These examples do not appear to work with the FireFox 3 XForms addition. Sliders are hidden with XSLTForms (r406).
Motivation
You want to use a range control or "slider" to set a numeric value in your form.
Selecting from a continuous range of values
The range is a control that is part of the XForms specification. It allows the user to select a numeric value from a range of values without using the keyboard. This is ideal for instructors that use interactive learning environments such as a SmartBoard.
The XForms range has four attributes:
- start - the lower bound of the range
- end - the upper bound of the range
- step - the increment of output change
- incremental - true if the form should send continuous values to the model or false otherwise. The default is false.
These attributes MUST be bound to an element that has a numeric datatype. To do this you must add the following bind statements to your model:
<xf:bind nodeset="/data/my-int" type="xs:integer"/>
<xf:bind nodeset="/data/my-decimal" type="xs:decimal"/>
User Interface
There are three range controls in this application. The value of the range is on the right side.
Link to XForms Application
Sample User Interface
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<head>
<title>XForms Submit Example</title>
<style type="text/css">
body {
font-family: Helvetica, sans-serif;
}
</style>
<xf:model>
<xf:instance xmlns="">
<data>
<data1>3.14159</data1>
<data2>6</data2>
<data3>66</data3>
</data>
</xf:instance>
<!-- you MUST bind each data type to the decimal type for the range control to work -->
<xf:bind nodeset="/data/data1" type="xs:decimal" />
<xf:bind nodeset="/data/data2" type="xs:decimal" />
<xf:bind nodeset="/data/data3" type="xs:decimal" />
</xf:model>
</head>
<body>
<xf:range ref="data1" start="1" end="5" step="1" incremental="true">
<xf:label>Data1: </xf:label>
</xf:range>
<xf:output ref="data1">
<xf:label> Value= </xf:label>
</xf:output>
<br />
<xf:range ref="data2" start="1" end="10" step="1" incremental="true">
<xf:label>Data2: </xf:label>
</xf:range>
<xf:output ref="data2">
<xf:label> Value= </xf:label>
</xf:output>
<br />
<xf:range ref="data3" start="1" end="100" step="5" incremental="true">
<xf:label>Data3: </xf:label>
</xf:range>
<xf:output ref="data3">
<xf:label> Value= </xf:label>
</xf:output>
</body>
</html>
Testing
Select one of the three range controls with the mouse. Drag the value to the right or left. You should notice that the values at the right also are updated.
The first control just selects decimals from 1 to 5. The second uses the step to return only integers. The last has a range of 1 to 100 in increments of 5. Note that the value is 66 and you cannot set a value from 62 to 65.
Discussion
The upper and lower values of the range control can also be set directly in the model. XML Schema provides a minValue and a maxValue that can be used to adjust the range control limits.
W3C Specification
Here is the specificaion from the W3C web site: W3C range specification