XForms, Range

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:

nodeset="/data/my-int" type="xs:integer"/>

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

Basic Range

Ranges Using Binds

Sample User Interface

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

XForms Submit Example
type="text/css">
body {
font-family: Helvetica, sans-serif;
}

xmlns="">

3.14159
6
66

nodeset="/data/data1" type="xs:decimal" />
nodeset="/data/data2" type="xs:decimal" />
nodeset="/data/data3" type="xs:decimal" />

ref="data1" start="1" end="5" step="1" incremental="true">
Data1:

ref="data1">
Value=

/>
ref="data2" start="1" end="10" step="1" incremental="true">
Data2:

ref="data2">
Value=

/>
ref="data3" start="1" end="100" step="5" incremental="true">
Data3:

ref="data3">
Value=

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 specification from the W3C web site:
W3C range specification

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.