Once upon a time...
At IMVU, we've come to rely heavily on YUI Library. We use it in the website for features such as the avatar card, the message widget, and the music store. It also plays a major supporting role in the user interface of our 3D client application (we embed XULRunner).
IMVU's agile atmosphere is such that the day we discover a new and cool technology can be the same day we ship product which includes that new and cool technology. As a result, we don't always RTFM. We learn by doing. We learn by failing. It's exhilarating, although sometimes the road is a bumpy one. YUI's Slider component was one of the bumps along the way.
It's easy, right?
Our 3D application has a tabbed interface, not unlike all popular web browsers. Internally, we refer to these tabs as modes. In our Settings mode, we needed a slider for adjusting the volume of voice chat. We chose YUI's Slider to satisfy that need:
The code was simple:
<div id="sliderbg"> <div id="sliderthumb"><img src="thumb.png" /></div> </div> YAHOO.widget.Slider.getHorizSlider( 'sliderbg', 'sliderthumb', 0, 200 );
Unfortunately, we found that the slider's thumb was always 20 pixels out of alignment! It fell too far off the left edge, the right edge, or didn't go far enough. The hacks and programming acrobatics that ensued in attempts to compensate were as far from simplicity as they were from sanity.
It's easy if you pay attention.
Fast forward a week or more later, and I decided to crack open the YUI Slider documentation. It took me less than five minutes of reading to realize exactly how we were doing it wrong. They key passage was this:
"In typical implementations you will need to make the background width equal to the total number of pixels you want the slider to be able to move plus the width of the thumb element."
It was accompanied by the following diagram:

Who knows why the initial maximum value had been set to 200. Everyone who came after assumed it was correct. It's a nice and even number. How could it be wrong? We failed to consider the relevance of the source art's dimensions:
![]() |
The background was 237x24 and the thumb was 17x24. This of course meant that the maximum value we should have been using was 237 - 17 = 220. Suddenly a certain magic number wasn't so magical anymore.
Art isn't fartsy. It's important!
If you're mindful of the dimensions of your source art and the simple math described above, you'll have no problem using YUI's Slider component.
Subsequent to this discovery, I re-cut our source art and removed the padding around the edges of our chat volume background and thumb art. This wasn't strictly necessary, but it allowed the use of a maximum value of 200. And 200 is such a nice and even number! I'm a software engineer. I have my reasons...
Below are some examples of correct and incorrect maximum values for their associated background and thumb art. I also threw in something a little more interesting for fun. View the source for details.
Enjoy!
