Slider - Ajax Patterns

Slider

From Ajax Patterns

Evidence: 3/3

Tags: Continuous Lever Multiple Range Slider


Contents

In A Blink

Diagram - <ref>Themes : Premium WordPress Themes</ref> a couple of sliders for e-commerce search.Insert non-formatted text hereInsert non-formatted text here--59.95.168.132 03:49, 18 September 2006 (EDT)


Image:Example.jpg

Headline text

  • cool stuff *

2202020

Headline text

link title


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 a2k?


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 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 specify 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 a range of around 200 unique values, which is enough granularity for many tasks.

A Slider can also show discrete data by identifying several points along the range. When the user releases the handle, it jumps to the nearest point. Why do this when radiobuttons 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 Slider.

A further benefit of Sliders is their excellent support for comparisons among 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 directly underneath each other helps the user to stick to the same scale, and see how each factor compared.

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

  • 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, direction arrows move it in either direction. Sometimes, it's 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.
  • Notifications from external sources. The Slider is sometimes synchronised 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 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. 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. A few considerations:

  • Data Type: Sometimes, the nature of the data dictates which is more logical. For instance, Google Maps uses a vertical Slider for zoom, which corresponds to a feeling of flying towards 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 a question. Vertical Slider would lead to a lot of whitespace.
  • Proximity: Where the slider controls something else on the page, you'll probably want to place them nearby, which might dictate orientation.
  • Comparison: As mentioned in the Solution, Sliders work well when placed in parallel and this 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.
  • Percentage (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, users - at least in western countries - usually 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

Amazon Diamond Search

Amazon Diamond Search presents several elaborate sliders. Each lets you specify a range, which acts as a filter for the diamond search. There are several innovative aspects of the presentation:

  • 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 that opens up an explanation about that variable.
  • The sliders are horizontal and parallel to each other. Unfortunately, the directions aren't aligned - price and carat increase from left to right, but cut quality increases from right to left.

Google Maps

Google Maps, 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 combining the flood-affected area of New Orleans with a Boston region of identical proportions. 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 extent of the slider. (The application is implemented in Flash, but could easily be implemented with standard Ajax technology.)

Yahoo Mindset

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

WebFX Slider Demo

The WebFX Slider Demo shows a few different sliders, in both horizontal and vertical orientation. You can set the slider directly and also update it with some text inputs.

Pagecolumn Sliders Demo

Pagecolumn uses slider as a component of various layout generators. Just drag the sliders to adjust the width of the columns. In order to make it simple to implement, the slider was designed to be invoked on just one div tag and 2 lines javascript codes.

RealMap.com.au - Real Estate Demo

RealMap is an upcoming Australian real estate search engine. The current demo makes use of slider controls to filter house results by minimum and maximum price and by the number of beds and baths. As houses are filtered they instantly appear or disappear from a Google map interface. This implementation is based on Yahoo's User Interface Library.


Code Examples

Yahoo Mindset

The Yahoo! Mindset slider is created with several images. There are images for the vertical lines at the centre and extremes. The main horizontal bar is created with a single vertical line - it's one pixel wide, but the image is set to 150 pixels, thus creating a horizontal bar. There's an handler registered for the click event (which pulls the handle in that direction).

  <img id="slidergrayrightimg"  src="images/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="images/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"></td>

A drag function is registered to handle the mouse moving 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 centre).

  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 finalised and an XMLHttpRequest call 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="+threshhold+"&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 action.

Embedded Text

As Amazon Diamond Search shows, it's often useful to dynamically show a text label with the current slider value. This can be some Embedded Text in or around the slider graphic.


Visual Metaphor

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


Want to Know More?


Acknowledgements