YUI, the Yahoo! UI Library is one of my favorite Web 2.0-style JavaScript libraries. It has fewer out-of-the-box features than some other libraries, e.g., scriptaculous, but it has great cross-browser support and a very solid, extensible foundation. I'll start with the end. I want something like this:
The observant reader will realize that this allows for some pretty fancy sliders. By replacing the backgrounds blue, red, and green portions with appropriate images — which can be done purely in CSS — you can create a very nice effect. My Photoshop skills are lacking so I'll leave it to your imagination. Now for how to implement this with YUI.
Most of the magic here is actually in the HTML and CSS, not in the JavaScript, so let's start with that.
<div id="left_fill_intro" class="left_fill">
<div id="handle_intro" class="handle"></div>
</div>
</div>
You probably get the basic idea. You have some background div which would contain slider graphics, like notches, and a handle div which contains the slider handle graphic. The key difference here is that we have one more additional div which will contain the fill graphic, i.e., the blue portion in the example above. The colors and alignment is set with CSS:
background: #0f0;
height: 10px;
width: 210px;
}
.left_fill {
height: 10px;
background: #00f;
width: 0px;
float: left;
}
.handle {
background: #f00;
width: 10px;
height: 10px;
float: left;
z-index: 100;
}
None of that is very mysterious. We float the divs to the left, give them explicit heights and widths, and set the handle div so that it will definitely float above the background divs. All you'd have to do to make these look pretty is replace the values of the background attributes with images.
If you're familar with JavaScript then you probably know what comes next. Using Yahoo's slider library we configure it so that whenever the handle is moved the width of the blue div is set to the current offset of the handle. This gives the illusion of the blue div being "pulled" by the red handle. The JavaScript:
var Event = YAHOO.util.Event;
function FancySlider(id) {
var sliderID = "slider_" + id;
var handleID = "handle_" + id;
var fillID = "left_fill_" + id;
this.onChange = function(offset) {
Dom.get(fillID).style.width = offset + 'px';
}
var slider = YAHOO.widget.Slider.getHorizSlider(sliderID, handleID, 0, 200);
slider.subscribe("change", this.onChange)
}
The result:
I wanted this to serve as a very simple introduction to YUI and the sort of JavaScript one uses frequently in creating Web 2.0-style applications. Hope this helped someone. Cheers!
[…] Creating a fancy slider in JavaScript using YUI on 20bits.com has some helpful tips for understanding, creating, and extending sliders. In my personal opinion, sliders–in all their varied visual manifestations–can be powerful interface widgets but are too often underused. […]
Looks nice in FF, but not in Opera 9.21.
very good
Very nice. Now how to use it so that it’s useful.
Perhaps use it to indicate how many persons are on a page or something like that.
Hello,
I’ve only just come across YUI and am struggling to get your slider working on my own PC. Which libraries are required?
What would be really helpful would be the full html for a page with just the slider!! Any chance?
Cheers
Geoff