From Wikibooks, open books for an open world
Jump to navigation Jump to search

NOTE[edit | edit source]

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

Motivation[edit | edit source]

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

Selecting from a continuous range of values[edit | edit source]

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[edit | edit source]

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 Application[edit | edit source]

Basic Range

Ranges Using Binds

Sample User Interface[edit | edit source]

        <title>XForms Submit Example</title>
        <style type="text/css">
            body {
            font-family: Helvetica, sans-serif;
            <xf:instance xmlns="">
            <!-- 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:range ref="data1" start="1" end="5" step="1" incremental="true">
            <xf:label>Data1: </xf:label>
        <xf:output ref="data1">
            <xf:label> Value= </xf:label>
        <br />
        <xf:range ref="data2" start="1" end="10" step="1"  incremental="true">
            <xf:label>Data2: </xf:label>
        <xf:output ref="data2">
            <xf:label> Value= </xf:label>
        <br />
        <xf:range ref="data3" start="1" end="100" step="5"  incremental="true">
            <xf:label>Data3: </xf:label>
        <xf:output ref="data3">
            <xf:label> Value= </xf:label>

Testing[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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

Next Page: Send | Previous Page: Controlling Button Appearance
Home: XForms