The Range Control

The range control is the XForms equivalent of a 'slider'. The XForms version allows us to indicate start, end and step values. We'll use a slider to allow the user to control the size of the images that are displayed.

The first step is to create some instance data to hold the current size of an image. In our applications we often have an instance called control that we use to hold assorted values like this, so add the following to the model:

      </xf:submission>
      <xf:instance id="inst-control">
        <instanceData>
          <size>75</size>
        </instanceData>
      </xf:instance>
    </xf:model>

This gives us an element called size with an initial value of 75. We use this to start us off, since it is the size of the smaller images on Flickr that we have been using so far.

Next we add our range control. As with the other controls you have seen, we must have a label, but we can also optionally have help, hints, and so on. The range control supports start and end attributes to indicate the 'range' of possible values. We'll use 1 to 200, so as to allow our images to go from 1px up to 200px:

      </xf:submit>
      <xf:range
       ref="instance('inst-control')/size"
       start="1" end="200"
       style="width: 200px;">
        <xf:label>Size:</xf:label>
      </xf:range>
      <xf:switch>

The range control can only be used on data that is typed to be an integer. We saw how to set the data type of a node in the del.icio.us form when we set an element to be a date, and we will use the same technique here. Add a bind statement to the model, below our control instance:

      </xf:instance>
      <xf:bind nodeset="instance('inst-control')/size" type="xs:integer" />
    </xf:model>