A user interface control is needed that allows to select a value within a range without allowing the user to enter invalid values.

Context

The user needs to set a value within a range of values, e.g., when changing the application’s settings.

Forces

The value range and the number of discrete ticks needs to be set correctly.

Solution

The proposed slider control allows positioning the slider thumb and select a value.

Usability Impact

Using this pattern prevents errors related to text input; no validation of input is needed.

Safety Impact

Because it is not possible to enter false values, safety is increased by the same effect of error prevention.

See also this paper by Nancy Leveson and Clark Turner on the Therac-25 accidents in the 1980s partially caused by unsafe interactions with the user interface of the radiation therapy device.

Interactive Examples

The two examples below demonstrate solutions for both touch technologies. The left example shows a solution where drag and drop operations are not supported; the control features additional Up and Down buttons to select values. The right example does not have these buttons; the control relies solely on drag and drop to select a value.

Above: Drag the thumb.

Left: Press the Up and Down buttons to select a value on the slider.