2002-10-07: First public version released
2006-05-28: Changed license to Apache Software License 2.0.

Introduction

Sliders are useful controls for choosing a value in a range of values. Common uses are volume controls, seekers for movie and sound files as well as color pickers. A few people have asked for an update to the old Slidebar component to make it work in Mozilla and work better in IE. But since the original control was very basic and was not very usable I decided to create a new one.

When starting with the new slider a few main features where kept in mind:

• Degrade gracefully for browser without the needed DOM support. This is achieved by using a basic text input as the base for the control. In case the browser does not support the needed features then the input can be used in the normal way.
• Full mouse support. Lots of slider controls does not support anything beyond dragging the handle. The goal was to allow the user to be able to both drag the handle and hold down the mouse anywhere on the slider to move the handle towards the mouse.
• Full keyboard support. Once the slider is focused the arrow keys and Page Up / Page Down can be used to change the value.
• Mouse wheel support where available.
• Skinable using different CSS files.

Requirements

The slider works in any browser but the GUI component works in browsers with simple DOM level 1 support with one IE extended proprietary property. That property is offsetWidth (and offsetHeight) and this is known to be supported by IE5+, Mozilla 1.0+, Konqueror 3+ and it is assumed other future browsers will support this as well because it has become a de facto standard.

Usage

To use the slider we have to include a few JS files and a CSS file.

<script type="text/javascript" src="js/range.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link type="text/css" rel="StyleSheet" href="css/winclassic.css" />

Then we need to define the HTML to use for the slider. Something like this:

<div class="slider" id="slider-1" tabIndex="1">
   <input class="slider-input" id="slider-input-1"
      name="slider-input-1"/>
</div>

After this we have to create the JS object that handles the logic. If we only plan to use this in pages and applications that you know will support the dynamic slider control we can use the following script block. This should be placed directly after the slider div.

<script type="text/javascript">

var s = new Slider(document.getElementById("slider-1"),
                   document.getElementById("slider-input-1"));

</script>

If we however cannot guarantee that all user uses browsers that support document.getElementById we should use document.forms to find the input and test whether document.getElementById is defined.

<script type="text/javascript">

var sliderEl = document.getElementById ?
                  document.getElementById("slider-1") : null;
var inputEl = document.forms[0]["slider-input-1"];
var s = new Slider(sliderEl, inputEl);

</script>

Slider
Implementation
API
Demo
Download

Author: Erik Arvidsson