Slip Sliding Away: Build an HTML Slider Control

Slip Sliding Away: Build an HTML Slider Control

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 tags that appear in the . Netscape 4.x requires that you use the NAME attribute (not the ID attribute) of the
, , and

The final, optional step is to customise your slider. To do that, copy the slider.js file and customize it for each custom slider or slider collection. The file consists of an array of JavaScript object literals, each one represents a single slider. To define more than one slider per page, make a copy of the one object literal supplied in the sample code to create additional array element?there’s no real physical limit, but there are practical limits. Just make sure that each array element has a unique value for its span_id property, which identifies each slider at runtime. Finally, set other slider properties based on your preferences. The most important ones are:

top, left: the location of the slider in the browser window

interactive: set the true, the user can move the slider stylus.

continuous: set to false, the stylus will always finish on one of the tick marks when dragged. Set to true, any point on the scale is allowed.

labels[] the user sees these values on the screen

values[] the value that results when the stylus aligns with a label.

The various _height and _width properties specify the display height and width for the images. The height and width properties don’t have to match those of the supplied images. If they don’t, the browser will scale the images. You can see that in action in the sample code, which uses mostly tiny two-pixel images. The browser expands them to the specified size when it renders the pages. To see what the images really look like, try viewing them in MS Paint or Xv at maximum zoom. You can change any of the images except pane.gif, which is a transparent one-pixel image used to pick up all the mouse events.

The other two JavaScript (libdetect.js and libslider.js files contain the plumbing code >) (See Listing 1). You don’t need to alter them to create sliders out of the box. How they work is next up.Sliders: Get Under the Hood
Libdetect.js is a browser detect script that sets some version flags, much like any browser detect script. Now that browser technology is maturing, you can sometimes rely on the official DOM implementation property to detect the browser version. You can see that done in Listing 2.

The other file, libslider.js, relies on libdetect.js for version flags, and contains only slider-specific functions. I’ve sweated over portability, so the most obvious bugs are all hammered out. In the future, you can update the library to use Netscape’s universal browser detect script. As it is, simple is beautiful.

A core design feature of this slider implementation was the use of images for the visual representation. You can experiment instead with border styles for slots and ticks, as described in the HTML box model, but the bottom line is that their layout is not yet as portable as simply using images, although they might be slightly faster. Even so, the default slot and tick images are very small, and with HTTP pipelining now common, the download overhead for loading the images is truly trivial.

As mentioned above, the file slider.js contains the global array of slider data, which you rename as required. The libslider.js defines the only other global variable, named sliding, which is a Boolean value set to true when the user is mid-slide.

The routine that initially displays the slider is slider_render(). It calls a rendering routine for each slider piece. These are just fancy document.write()’s.

The main code then installs handlers in the Byzantine ways required by the different browsers. In fact, this code is clear enough to use as a general guide for cross-browser events. Note that for Netscape 4.x, the global onMouseMove event gets stomped on. Oh well, version 1.0. In order to get event backwards compatibility right, a pane is used. The pane is a transparent image covering the whole of the slider. It receives all the events. The bonus here is that you can click on the pane “near” the stylus and still get a response.

   function slider_render(obj)   {   var i;   var span;         with (window.document)      {      if (old)      {         write("
No browser support " + for sliders
"); return; } // now write out all the bits slider_render_scale(obj); slider_render_pane(obj); // calculate tabs between ticks if ( obj.tick_tabs == null ) { obj.tick_tabs = (obj.scale_width - obj.tick_width) / (obj.ticks-1.0); } // draw ticks and labels for (i=0; i

Listing 3 contains the complete code for the libslider.js file.

The three mouse event handlers in Listing 3 are almost completely different for each browser. Their design is common, though. The two stylus images are exactly z-order stacked. By manipulating their visibility and position in the handlers, you get visual feedback when dragging.

There's also a Terrible Hack. To support multiple sliders per page, handlers need to know which slider they were invoked on. For Netscape 4.x, this is really hard, because it that browser's primitive DOM support. The sample code accomplishes slider identification by appending a local reference the slider's span_id to the URL for the transparent pane. It's a bit like http://pane.gif#slider1 instead of http://pane.gif. Fortunately, Netscape 4.x doesn't care (whew), and we can dig out from the URL the slider name when we need it.

The last few routines calculate which value the slider does or should point to. This saves the user from having to drag to an exact pixel location.

Sliders are a missing piece in the HTML forms toolkit. With modern browsers from both Netscape and Microsoft supporting tabbed interfaces, sliders are one of the few form controls seen in traditional desktop GUI applications that don't also appear on the Web. Well, now they do, and they're a sight more friendly that a big drop-down list of values to pick from. You'll find that the slider is also useful in reports and as a configuration tool. Enjoy.


Share the Post: