XForms-Transitional Testbed - range controls

This is part of a series of cross-platform experiments in incremental extensions to HTML4 forms that provide a stepping stone towards the much richer capabilities in XForms. This particular experiment introduces a range control where the type attribute for the input element has the value "range", and the min, max and step attributes define the values the field can have.

Please view the XForms-Transitional script for more details on how this works.


Here is the markup for the above form:

<form name="form1" onsubmit="false">
<legend>Typed fields</legend>
<label for="f1"
 title="must be a number between 1 and 5">Number</label>
<input id="f1" name="x" type="range" datatype="range"
 size="2" min="1" max="5" step="1"/>


Safari and Opera show a slider, but I don't know how to drive them from the keyboard if you can't use a mouse/trackpad. On Firefox, you can use the Enter key to activate the spin up/down buttons, but although these buttons are shown on Safari, Safari doesn't recognize the Enter key and hence you can't activate buttons without the mouse! This would be worked around using an explicit keydown event handler.

I have used datatype in addition to type as unfortunately Opera Mobile returns "text" for types it doesn't know about, whether you access the type property on the field or call getAttribute. On browsers with native support for type="range", the native widget is used, whilst on other browsers the widget is generated dynamically by the XForms Transitional library. This presumes a reliable way to test for native implementations.

The range control should ideally show the number together with a means to manipulate it within the given min and max values, and subject to the step value if provided. The control could be presented in a number of different ways, for example, as a slider, as a rotary control, or as up and down buttons. How does the author specify how the control is presented, and is there a means to customize the presentation with special graphics or application specific controls? For now, the presentation can be tailored via the XForms-Transitional script, see the initRangeControl function.

What happens if the range is not an exact multiple of the step value? One possibility is to force the field value to be the min value plus an integral multiple of the step value. The maximum value will then be less than the value of the max attribute if the range isn't an integral multiple of the step atttribute value.

Ideally, the range control could also be used for dates and other datatypes. This suggests that it would be better if the use of the range control was selected by some other means that the type attribute!

Dave Raggett <dsr@w3.org>