Add Slider Controls to Your Forms
Implementing the slider is very simple. Addd this code to the <head>
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:
// or slider_render_all(); // for more than one
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:
That's nearly it. There are two known portability gotchas. Mozilla (0.99, anyway) needs the <FORM></FORM>
tags that appear in the <BODY>
. Netscape 4.x requires that you use the NAME
attribute (not the ID
attribute) of the <FORM>
and <TEXTAREA> tags to identify the HTML elements.
The final, optional step is to customise your slider. To do that, copy the slider.js
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.
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.