DOM slider object

This is a demonstration implementation of a slider UI element built with HTML, CSS and JavaScript. It is inserted in the document with an onload call to its constructor function like so (all parameters are mandatory):

   document.getElementById([sliderBoxId]).slider =
   new Slider(document.getElementById([sliderBoxId]), // parent element in the document's HTML
              [slider range],                         // the number of slider steps
              [slider orientation],                   // either 'hor' or 'vrt'
              [slider start position],                // one of 'start', 'middle' or 'end'
              [slider showScale],                     // true | false - show slider scale
              [function to call on slide]             // a reference to a function that is called
             );                                       // when the slider handle is moved

The HTML that would show this slider in the document would look like this:

   <div id="[sliderBoxId]"></div>

A Slider object has the following methods:

   moveTo([index])   // moves the slider handle to a specified index within the slider range
   getIndex();       // returns the range index the slider handle is at
   reset();          // resets the slider to its default state

The appereance of the slider is controlled from CSS and uses 8 images: 4 arrows and a background for both the horizontal and vertical gutter and handle one image for the slider handle. The number of sliders that can be included in a document is only limited by the amount of memory in the host machine.

The slider handle can be moved by a) dragging it, b) clicking on the arrows to step, c) holding the mouse down on an arrow to repeatedly step or d) clicking anywhere in the gutter to jump to that position.

Below is an example implementation, mostly to demonstrate how to call a function when the handle is moved. The CSS and JavaScript are included in the source of this document for easier perusal.


drag the horizontal slider to change the clipping of the following paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

drag the vertical slider to change the clipping of the adjacent paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

100%drag the slider to change the font size of both paragraphs
Valid HTML 5