RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Slip Sliding Away: Build an HTML Slider Control

Win the usability war on your Form-oriented Web page with this new DHTML slider that acts just like the one your desktop GUI has supplied for years.


lease fill in this form. Those five words make anyone's heart sink. Filling in forms is rarely a delight, and Web forms are no exception. The more user-friendly you can make your forms, the less of a burden it causes users to fill out—and the more likely they are to fill the form out.. When you create Windows forms, you can simplify input with a variety of powerful and intuitive controls; but HTML doesn't support the same control set. But you can "roll your own" with the help of a little DHTML.

For example, suppose you need users to enter or select a value from a range of values. In a Windows form, you'd use a slider control, but sliders are among the missing controls in the HTML forms toolkit. But it's much easier for users to move a slider control than to pick an item from a huge drop-down list, or worse, to type in a value manually. In this article you'll see how to represent ranges of values in a very user-friendly and portable way using a slider.

When to Use Sliders
Sliders are an easy and natural interface for users, because they provide good visual feedback. When the slider moves one way that's Less; when it's moved the other, that's More. Such an interaction matches the user's real-world experience and is more meaningful than typing in a magic number and faster than selecting an item from a list.

Until now, browsers have been a bit weak on sliders. There's nothing like an <INPUT TYPE="slider">"" in HTML 4.01, or XHTML 1.0. In fact, forms were bolted on to HTML a bit hastily in the first place. The XForms 1.0 draft standard seeks to modernise the whole mess—and it includes a slider specification; but most browsers don't support XForms just yet.

But you can implement a slider yourself in a couple of JavaScript files that you can drop into your Web pages. The sample slider in this article works on IE5 and higher, and on Netscape 6.x, 4.x and Mozilla. In fact, it should work on any DOM2-compliant browser. This code is highly data-driven; there's no heavy coding required. It's also highly configurable—your slider can have any appearance, based on a few supplied preferences and images.

Where might sliders apply? Consider a system outside of browsers like a sound deck or a video deck. No one turns up the bass by choosing from a drop-down menu or typing in a volume. For Web applications that involve control systems, a slider is just what you need. The sample sliders in the next section should help give you ideas about where and how to use sliders.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date