14.1. SliderContinuous, Lever, Multiple, Range, Slider Figure 14-1. Slider14.1.1. Goal StoryStuart 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. 14.1.2. ProblemHow can users specify a value within a range? 14.1.3. Forces
14.1.4. SolutionProvide 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:
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. 14.1.5. Decisions14.1.5.1. How will you orient the Slider?There are two options for orientation: horizontal or vertical. Following are a few considerations:
14.1.5.2. 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:
14.1.5.3. How will you present the scale?There are various strategies for presenting the scale:
The labels are usually shown alongside the Slider, but to conserve space, you can sometimes show them inside it. 14.1.6. Real-World Examples14.1.6.1. Yahoo! MindsetA 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 14-2). 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. Figure 14-2. Yahoo! Mindset14.1.6.2. Amazon Diamond SearchAmazon Diamond Search (http://www.amazon.com/gp/gsl/search/finder/002-1527640-2908837?%5Fencoding=UTF8&productGroupID=loose%5Fdiamonds) presents several elaborate Sliders (see Figure 14-5). 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.
14.1.6.3. Google MapsGoogle Maps (http://maps.google.com), like most of its Ajaxian map counterparts, uses a Slider to control the zoom level. 14.1.6.4. Katrina-Boston map overlayIn 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 14-3). 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. Figure 14-3. Katrina-Boston overlay map14.1.6.5. WebFX Slider DemoThe 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. 14.1.7. Code Example: Yahoo! MindsetThe 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 src="/books/2/755/1/html/2/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 src="/books/2/755/1/html/2/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"> 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) } 14.1.8. Alternatives14.1.8.1. Conventional controls: radiobuttons and selector fieldAs mentioned in the solution, a Slider performs similar functionality to radiobuttons and selectors. 14.1.9. Related Patterns14.1.9.1. Drag-And-DropThe Slider handle is usually manipulated with a Drag-And-Drop (Chapter 15) action. 14.1.10. MetaphorSliders are a UI metaphor based on physical sliders in control devices such as audio-visual consoles. |