O'Reilly logo

YUI 2.8 Learning the Library by Dan Wellman, Daniel Barreiro

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required