Slider






Slider

Continuous, Lever, Multiple, Range, Slider

Slider


Goal Story

Stuart is rating his lecturer online. Each answer lies somewhere between "Strongly Disagree" and "Strongly Agree." Unlike conventional surveys, the scale is continuous, because Stuart uses a Slider to set a precise value along the spectrum.

Problem

How can users specify a value within a range?

Forces

  • Most data is constrained to reside within a range.

  • Prevention is better than cure; the user interface should be designed such that the user is forced to choose a value within the range instead of the interface checking and providing an error message later on.

Solution

Provide a Slider to let the user choose a value within a range. The user drags a handle along one dimension to set the value. As a variant, two handles on the same Slider can allow the user to choose a range instead of a single value.

Standard HTML contains two related input controls: radiobuttons and selectors. Each of these lets you specify a value from a fixed list of choices. The biggest advantage of a Slider is that the data range can be continuous as well as discrete. Of course, "continuous" is an approximation, since you can only have as many choices as there are pixels in the Slider range. But with most Sliders, that means you have hundreds of unique values, which is continuous for most intents and purposes.

A Slider can also show discrete data by identifying several points along the range. When the user releases the handle, the Slider jumps to the nearest point. Why use a Slider when radio buttons and selectors already support discrete data? A Slider provides a better visual indication that the data resides in a spectrum. Also, it's often faster because the user can click anywhere in the region as opposed to aiming precisely at a radiobutton or opening up a dialog box.

A further benefit of Sliders is their excellent support for comparing similar data. When several Sliders share the same range, they can be placed in parallel to show how the variables differ. For example, a product survey could ask questions such as "Were you happy with the price?" and "How easy was it to start using?" The answers lie on a different scale but ultimately map to the same range from "Unhappy" to "Happy." Placing these horizontal rows in parallel helps the user stick to the same scale and compare each factor to the others.

Because Sliders aren't standard controls, you'll need to either use a library or roll your own. Typical control mechanisms include the following:

  • Dragging the handle moves it directly.

  • Clicking on either side of the handle moves it a little in that direction.

  • While the Slider has keyboard focus, pressing left and right arrows move it in either direction. It's sometimes useful to offer an accelerator key such as Shift, which, held down at the same time as the arrow, speeds up the handle movement. Keyboard controls are particularly important when the control is part of a form.

  • Receiving notifications from external sources. The Slider is sometimes synchronized with another object, so if that object changes, the Slider must update too.

A typical implementation separates the scale from the handle. The scale consists of a line, possibly with some notches and labels. The handle is usually an image, with the zIndex property set to place it "in front of" the main Slider. There are several event handlers required to support all of the mechanisms above, and the Slider handle itself is manipulated using techniques discussed in Drag-And-Drop (Chapter 15). In addition, movements will often trigger other activity, such as an XMLHttpRequest Call or a change to another page element.

Decisions

How will you orient the Slider?

There are two options for orientation: horizontal or vertical. Following are a few considerations:


Data type

Sometimes the nature of the data dictates which option is more logical. For instance, Google Maps uses a vertical Slider for zoom, which corresponds to a feeling of flying toward and away from the map as you zoom in and out.


Layout

Aesthetic appearance and space conservation are important. Many forms will feature horizontal Sliders because they fit well underneath questions. Vertical Sliders would lead to a lot of whitespace.


Proximity

Where the Slider controls something else on the page, you'll probably want to place them near each other, which might dictate orientation.


Comparison

As mentioned earlier in the "Solution," Sliders work well when placed in parallel, which means a common orientation.

What scale will you use?

There are quite a few ways to present a variable, and the choice will depend on the nature of the data and what users are comfortable with. Examples include:

  • Qualitative descriptions ("Low", "High"). This might seem suited only to discrete ranges, but the labels can also be used as markers within a continuous range.

  • Absolute values.

  • Percentages (typically ranging from 0 to 100).

How will you present the scale?

There are various strategies for presenting the scale:

  • Provide no labels; rely on context and conventions. For instance, usersat least in western countriesusually assume Sliders increase in value to the right.

  • Provide just a label at either end.

  • Provide labels at several points along the range.

The labels are usually shown alongside the Slider, but to conserve space, you can sometimes show them inside it.

Real-World Examples

Yahoo! Mindset

A product of Yahoo Labs, Yahoo! Mindset (http://mindset.research.yahoo.com/) lets you tweak search results with an unusual type of Slider that ranges from "shopping" on one end to "researching" on the other (Figure). Pull the "Ajax" results towards "shopping" and you'll see links to cleaning products and football. Pull it to the right and you'll see some information about web design (and, it must be said, more football). Also of note: the Slider is "Live"each time you change it, the results are automatically updated via an XMLHttpRequest Call.

Yahoo! Mindset


Amazon Diamond Search

Amazon Diamond Search (http://www.amazon.com/gp/gsl/search/finder/002-1527640-2908837?%5Fencoding=UTF8&productGroupID=loose%5Fdiamonds) presents several elaborate Sliders (see Figure). Each lets you specify a range, which acts as a filter for the diamond search. There are several innovative aspects of the presentation, discussed next.

  • The labels are dynamic. As you drag the handles, the labels show exactly the value that's been specified.

  • There's a graphic inside the Slider, which represents the variable in each case. Price, for example, is shown as an increasing histogram, and Cut shows several diamonds of decreasing cut quality.

  • The Slider graphic is faded outside the selection region.

  • Each Slider has a Microlink (Chapter 15) that opens up an explanation about that variable.

  • The Sliders are horizontal and parallel to each other. Unfortunately, the directions aren't alignedprice and carat increase from left to right, but cut quality increases from right to left.

Google Maps

Google Maps (http://maps.google.com), like most of its Ajaxian map counterparts, uses a Slider to control the zoom level.

Katrina-Boston map overlay

In the wake of hurricane Katrina, Boston.com produced an overlay map (http://www.boston.com/news/weather/hurricanes/multimedia/globe_map/) combining the flood-affected area of New Orleans with a Boston region of identical proportions (Figure). A Slider is used to alter opacity: at one extreme, you can only see the New Orleans image; at the other extreme, you can only see the Boston image. In the middle, you can see both images, with one or the other dominant depending on the position of the Slider. The application is implemented in Flash, but could easily be implemented with standard Ajax technology.

Katrina-Boston overlay map


WebFX Slider Demo

The WebFX Slider Demo (http://webfx.eae.net/dhtml/slider/slider.html) shows a few different Sliders, in both horizontal and vertical orientations. You can set the Slider directly and also update it with some text inputs.

Code Example: Yahoo! Mindset

The Yahoo! Mindset Slider (http://mindset.research.yahoo.com/) is created with several images. There are images for the vertical lines at the center and extremes. The main horizontal bar is created with a single vertical line; it's 1 pixel wide, but the image width is set to 150 pixels, thus creating a horizontal bar. There's a handler registered for the click event (which pulls the handle in that direction):

  <img id="slidergrayrightimg"  src="/img/ajaxdp/gray_bar.gif"
    height="36" width="150" unselectable="on"
    onClick="setup('1505998205%3Ac26b16%3A105900dfd3e%3Aff4', 'ajax');
    endDrag(event); return false;">

The Slider handle, called sliderball, is also an image:

  <img id="sliderball" src="/img/ajaxdp/aqua_ball_trans.gif"
    onMouseDown="dragStart(event, '1505998205%3Ac26b16%3A105900dfd3e%3Aff4',
      'ajax'); return false;" unselectable="on"
    style="position: relative; z-index: 1; top: 0px; left: -136px;"
    height="36" width="18">

A drag function is registered to handle moving the mouse after the handle has been selected. Based on the current mouse position, it calculates where the Slider should be and calls a function to move it:

  function dragStart(e, sID, q) {
    ...
    document.onmousemove = function(e) { drag(e); };
    document.onmouseup = function(e) { endDrag(e); };
    ...
  }
  function drag(e) {
    ...
    var relativePos = e.clientX - sliderOffset;
    ...
    moveSlider(relativePos);
  }

The moveSlider function redraws the handle based on its relative position (positive or negative offset from the center):

  function moveSlider (relativePos) {

    var centerPoint = (maxRight - minLeft) / 2;
    var centerBuffer = 5;

    //the ball position is relative
    var ballPos = (-(maxRight - minLeft)) + (relativePos-(ballWidth/2));
    document.getElementById('sliderball').style.left = ballPos+'px';
    ...
  }

Finally, when the Slider is released, the handle's position is finalized and an XMLHttpRequest Call is issued to bring the results in line with the new value:

  function endDrag(e) {
    ...
    var relativePos = e.clientX - sliderOffset;
    drag(e);
    ...
    var sliderURI = "/searchify/slider?UserSession="+sessionID+
                    "&SliderValue="+threshold+"&query="+query;
    (Sends XMLHttpRequest to SliderURI)
}

Alternatives

Conventional controls: radiobuttons and selector field

As mentioned in the solution, a Slider performs similar functionality to radiobuttons and selectors.

Related Patterns

Drag-And-Drop

The Slider handle is usually manipulated with a Drag-And-Drop (Chapter 15) action.

Metaphor

Sliders are a UI metaphor based on physical sliders in control devices such as audio-visual consoles.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows