Visual selection with the slider control
So far in this chapter we've focused on the functionality provided by the Drag-and-Drop utility. Let's shift our focus back to the interface controls section of the library and look at one of the components that is related very closely to drag-and-drop—the Slider control.
A slider can be defined using a very minimal set of HTML. All you need are two elements—the slider background and the slider thumb, with the thumb appearing as a child of the background element. The slider thumb may contain an image or be decorated somehow:
<div id="slider_bg" class="yui-h-slider"> <div id="slider_thumb" class="yui-slider-thumb"> <img src="images/slider_thumb.gif"></div> </div>
These elements go together to form the basic slider control, as shown in the following figure:
 |
The class names are mandatory and correspond to definitions in the slider.css file. The "h" in yui-h-slider needs to be replaced by a "v" or a "region" for vertical and...