Implementing a Slider user interface

March 17, 2013

A Slider is a graphical user interface that allows a user to select a value from a given range of values by dragging the slider knob, or button. A slider is preferred when the user is likely to alter the value of a parameter, or a configuration, frequently in order to analyse its effect on a system. For instance, adjusting the hue of a visual object by varying its RGB channels is faster using a slider than it is by setting the values manually.

A slider is also preferred when it would be cumbersome to enter the required value manually. For instance, it makes more intuitive sense to adjust the volume on a multimedia application using a slider than it is by setting the required decibels manually. The following is an example slider.

This value ( ) is set by a custom handler attached to the above slider.

Usage

Before we design and implement the slider, we must first understand the functionalities that it will provide. These are:

  • It should allow a user to change the value of a variable by dragging its slider button,
  • The value that this slider can accept should be bounded, and
  • The user should be allowed to set the values manually.

Further to these, we must further specify the manner in which an instance of the slider could be created. In other words, how does a programmer embed a slider inside, say, a web page. This means defining the application programming interface for the slider.

Instantiation

To instantiate a slider, a user must provide the properties that specialise that instance. This includes the following:

  • What type of variable is associated with the slider? In other words, the label to display. For instance, 'Volume', 'Red channel', etc.
  • What are the bounds of the value the variable can take? This is specified by the maximum and minimum values allowed.
  • What is the default value to choose upon instantiation?
  • What should happen when the value changes? This is the functionality that a change in slider value should trigger. For instance, increase or decrease in volume.

Furthermore, we must specify the visual and environmental parameters:

  • What will contain the slider? This dictates where and inside which document node the slider appears.
  • How would you identify the slider? This specifies its unique reference.
  • What are the visual dimensions of the slider? Its height and width.

We are now ready to design the slider using these properties.

Design

The slider has two core components. The visual components that are rendered visible, and the internal implementation details that drive the functionalities.

Visual components

Since the slider is a graphical interface, its internal implementation should relate to its form, i.e., apperance. However, this form is dictated by the usage scenario stated above. Here are the core visual components that a slider must have:

  • A reference bar that represents the value range,
  • A draggable button that is positioned to reflect the current value,
  • Legends that mark the variable type and the bounds, and
  • A text box where users can enter a value manually.

These are shown below.

Slider components

Slider components

The application programming interface

Based on the instantiation requirements discussed above, the application programming interface for the slider takes the following form:

/**
  * Implements a Slider user interface.
  * 
  * @param {Object} parentId Unique identifier for container node.
  * @param {String} id Unique identifier for the slider.
  * @param {String} label The value label.
  * @param {Real} min Minimum value allowed.
  * @param {Real} max Maximum value allowed.
  * @param {Integer} height Maximum height for the slider in pixels.
  * @param {Integer} width Maximum width for the slider in pixels.
  * @param {Function} onValueChange Processing to do when value changes.
  * @param {Real} value Optional default value.
  */
Slider = function(parentId, id, label, min, max, height,
    width, onValueChange, value) {...}

Source code

git clone https://github.com/gyaikhom/slider.git

Example usage

The instantiation code used in the example above is:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="slider.min.css">
    <title>Example usage of slider</title>
  </head>
  <body>
    <div id="text-field"></div>
    <br>
    <div id="slider-container" style="width:600px;height:50px;"></div>
    <script src="slider.min.js"></script>
    <script>
      var slider = new Slider("slider-container",
           "a-slider", "Value", 0., 1., 50, 600, function(value) {
           var field = document.getElementById("text-field");
           field.innerHTML = value * 2;
      });
    </script>
  </body>
</html>
comments powered by Disqus