XForms/Range

NOTEEdit

These examples do not appear to work with the FireFox 3 XForms addition. Sliders are hidden with XSLTForms (r406).

MotivationEdit

You want to use a range control or "slider" to set a numeric value in your form.

Selecting from a continuous range of valuesEdit

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 InterfaceEdit

There are three range controls in this application. The value of the range is on the right side.

XForms Range Screen Image

Link to XForms ApplicationEdit

Basic Range

Ranges Using Binds

Sample User InterfaceEdit

<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>

TestingEdit

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.

DiscussionEdit

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 SpecificationEdit

Here is the specificaion from the W3C web site: W3C range specification


Next Page: Send | Previous Page: Controlling Button Appearance

Home: XForms

Last modified on 28 May 2010, at 13:11