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 “” 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.Try the Samples
Here are some simple test slider samples you can experiment with. The file slider.html shows a slider in the context of a normal form. The slider uses CSS2 styles to give it an absolute position. In this case it appears after the end of the HTML. That’s a limitation of the method used to create the sliders. Ideally, you would want the browser to render sliders inline in addition to using absolute positioning, but if you want to support Netscape 4, that’s not an option.. Drag the stylus (the moveable part) of the slider around to see it work. When you press “Update”, the code copies the slider’s value into a normal element, where it could be submitted to a server. In a real application, you would typically use a hidden form field to hold the slider’s value rather than a text field.
The second example, report.html shows the disk use of a Linux box, but it could just as easily be any performance report. In this sample, the sliders aren’t interactive, but they do provide an interesting visual method of presenting the information.
The third example hand.html shows a different interactive slider, and illustrates that the visual representation of the slider is entirely independent of its implementation. The stylus uses a different image. This slider is continuous, meaning the stylus can stop anywhere, not just at one of the ticks. The remainder of the visual representation?the “”uses the same image as before, but the value types, labels and fonts are all different.Add Slider Controls to Your Forms
Implementing the slider is very simple. Addd this code to the section of your HTML page. The code includes three JavaScript files that implement and animate sliders
These inclusions create a document.sliders array, like the other document arrays. Put this in the body of your document to make the slider appear:
If your document includes a form, then make sure the form and form element ID’s match those in slider.js. If you want to be able to copy a slider value to a form field, then add a form event handler such as this one:
ONSUBMIT=”return slider_set_value(slider[2])”
That’s nearly it. There are two known portability gotchas. Mozilla (0.99, anyway) needs the tags before the