Browse DevX
Sign up for e-mail newsletters from DevX


Slip Sliding Away: Build an HTML Slider Control : Page 3

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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Add Slider Controls to Your Forms
Implementing the slider is very simple. Addd this code to the <head> section of your HTML page. The code includes three JavaScript files that implement and animate sliders

<SCRIPT SRC"="libdetect.js"></SCRIPT>
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="libslider.js"></SCRIPT>

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:

<SCRIPT> slider_render(sliders[0]); // or slider_render_all(); // for more than one </SCRIPT>

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 <FORM></FORM> tags before the <SCRIPT> tags that appear in the <BODY>. Netscape 4.x requires that you use the NAME attribute (not the ID attribute) of the <FORM>, <INPUT>, <SELECT> and <TEXTAREA> tags to identify the HTML elements.

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.

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