Yahoo’s AJAX slider

Recently Yahoo! released a set of AJAX user interface components to allow people to make their applications look snazzy and be more useful.  One of the most
intriguing to me was the slider.  Sliders are typically the property of desktop applications.  They provide the ability for the users to filter and narrow without suffering the stress of a page reload.

I wanted to see how easy this was, and how much of a benefit Yahoo had made available to the developer community, so I set out to implement something for myself.  Of course I had a trip to Atlantic City coming up, so I wrote something that would let me look through the poker tournament listings I had compiled.  I didn’t take the time to make it compatible with all browsers, so if you have Firefox take a moment and check it out.

After you click on the day of the week, you can use the sliders to narrow your buyin range.  Upon each slider value change there is a call to the listings function that re-writes the listings that fit the criteria.

To do this, I had to learn a couple of key things, the chief of which is that Javascript is a real language.  Specific tricks included:

  • the ability to read a file from a remote site (using Yahoo’s Connection Manager for http requests);
  • how to use serious CSS positioning (those sliders are not in a table, but are next to each other;
  • how to use the Yahoo! sliders themselves; and finally…
  • the trick of how to rewrite live HTML on the screen.  (the infamous innerHTML trick)

This was basically a crash course in Web development for me, but even though I’m not programming every day, it’s still nice to see I can still do it.

Note that I don’t intend to keep the data here up-to-date, as the AC tournament schedule changes every month and I’ve already got a day job.