The DHTML Slider files are bundled in a zip file. Click the download link in the Slider section of System's web site, and follow the instructions to download the file.

Save the file (zpslider.zip) to your website's root folder on your computer or server.

2. Unzip zpslider.zip

On your computer, go to the folder where you saved the file zpslider.zip.
zpslider.zip contains a folder called zapatec that holds all of the files you will need to create your slider.
Open or double-click zpsldier.zip to unzip or unpack it.

Chapter 2. Quick Startup

If you have not done so, follow the instructions in section 1.1 to download and unzip the slider files.

1. Set Up Your Slider Module

In your web editor (Dreamweaver, UltraEdit, etc.), open the web page in which you want the slider placed. Insert your cursor before the ending </head> tag. Paste the following style path and script paths before the ending </head> tag:

<!-- Javascript System utilities file -->
<script type="text/javascript" src="zapatec/utils/zapatec.js"></script>
<!-- Javascript file to support slider -->
<script type="text/javascript" src="zapatec/zpslider/src/slider.js"></script>

1.1. Path Warning

If your web page containing the Slider is saved in the zpslider folder, these lines work without any changes. If, however, you save your web page in another location (like directly under your website's root folder), you need to adjust the path for these files.

1.2. Upgrade Warning

If you have been using a version of System slider that is older than version 2.0 and are now migrating to the current version, you need to adjust the header files.

The older utils.js is no longer supported; it has been replaced by zapatec.js. To upgrade, replace the old lines:

<script type="text/javascript" src="zapatec/zpslider/utils/utils.js"></script>
<script type="text/javascript" src="zapatec/zpslider/src/slider.js"></script>

with

<script type="text/javascript" src="zapatec/utils/zapatec.js"></script>
<script type="text/javascript" src="zapatec/zpslider/src/slider.js"></script>

In addition, the use of the LINK element for CSS inclusion in pre-2.0 versions is no longer supported. If you included a CSS file in the HEAD of the HTML page your pre-2.0 version as in:

<link href="zpslider/themes/theme1.css" rel="stylesheet" />

you should delete this line. Instead, set the CSS using the theme option in the System.Slider constructor.

2. Attach the System Slider Object to your Presentation

All you have to do in your HTML page is call System.Slider to add a slider to your container.

<script> 
    new System.Slider({
        parent : myDiv,
        length : 100,
        start : 20,
        orientation : 'H'
    });
</script>

3. Copy your files to your web server

Using your editing or FTP program, copy or "put" your web page and the entire tree folder to the root of your website.

4. Test the Slider application

Using your web browser, navigate to the web page that you created to include the System DHTML Slider. Congratulations! You have set up the most basic version of the System DHTML Slider! Now, on to the fun and exciting features you can change with this highly adaptable application!

Chapter 3. Slider

The System Slider is a useful tool for collecting data from your users.

See the Basic Slider Demo.

As you slide the icon on the slider, the value changes. You can add an optional onChange function to perform an action based on the change.

1. Dual Sliders

In addition to regular sliders, you can also construct dual sliders. Dual sliders let the user choose a range. For instance, the user who is looking at cameras in the price range between $100 and $1000, can choose to limit the range further to $200 - $400.

When using a dual slider, the user can't slide the minimum slider past the maximum slider, and vice versa. For example, if the maximum slider is at 50, the minimum slider can only go as high as 49.

2. Slider Options

2.1. div (string or HTMLElement, default null)

This option is depricated, use parent option instead.

2.2. parent (string or HTMLElement, default <BODY>)

This is the element in which the slider appears. The argument is either the ID of the element as a string or the DOM object itself

2.3. length (int, default 100)

This is the physical length of slider's scale on the screen in pixels. This not the real measurement for possible values. For example you may use range [1, 5] for the slider and length 100, and that will result in possibility to chose only 1, 2, 3, 4 and 5. But physically (we can not move mouse for less than 1 pixel) it cuts some values if range is much bigger than length. Like when range is [0, 75] and length is 50, we will not be able to chose some values using mouse, but using next/previous buttons we can. So please try to adjust the size of the range to the physical length of the scale.

2.4. range (array)

Specify the array of two integers which will be treated as min and max value for the slider.

2.5. step (int)

Specify the value which will be treated as minimal increment/decrement when changing the value inside this range.

2.6. start (int, default 0)

This is the starting value for the slider when the slider is created.

If you have a dual slider, this is the initial location of the first slider.

2.7. secondStart (int)

If you have a dual slider, this is the initial location of the second slider.By default it equals to the second value of range option (if used) or to the value of the length of the slider.

2.8. orientation (string , default null)

This is the orientation of the slider. 'H'=Horizontal, 'V'=Vertical.

2.9. onChange (function, default null)

This option is depricated. Use eventListeners option instead.

2.10. newPosition(function, default null)

This option is depricated. Use eventListeners option instead.

2.11. eventListeners (object)

This is a hash of event listeners to be attached to the object you create. Pass events as its properties. For example:

new System.Slider({
    ...
    eventListeners : {
        onChange : function() {
            ...
        },
        newPosition : function() {
            ...
        }
    },
    ...
});

2.12. dual(boolean, default false)

This option specifies two sliders. One can be used for the lowest slider value, the other for the highest.

2.13. theme(string)

This option specifies the CSS used to present the slider.

The string argument is the name of the theme:

theme : 'theme2'

or the absolute or relative path to the theme file:

theme : 'themes/theme2.css'

The theme name is case-insensitive. Some themes are provided in the themes folder.

If the theme option is not specified, the default.css file in the themes folder is used.

3. Public Methods

Slider gives you some public API to control its behaviuor in runtime.

3.1. setScaleLength(length)

Sets the length of the scale of the Slider. Its usage is equivalent to usage of length option in constructor. The only argument is new length of the scale in pixels.

3.2. setRange(min, max)

Sets new range of values for the Slider. Its usage is equivalent to usage of range option in constructor. Argument "min" sets left border of the range, and "max" - right border.

3.3. setPos(first, second)

Sets the position of both sliders on the scale. Argument "first" points to new position of the first slider, and "second" - to the new position of second slider. The values should correcpond to range not to pixels.

3.4. stepUp()

Moves the slider for one step more. Step value is defined by config option step . Only aplliable to single Slider(not dual).

3.5. stepDown()

Moves the slider for one step less. Step value is defined by config option step . Only aplliable to single Slider(not dual).

3.6. gotoFirst()

Moves the slider to the begining of the scale. Only aplliable to single Slider(not dual).

3.7. gotoLast()

Moves the slider to the ending of the scale. Only aplliable to single Slider(not dual).

3.8. getPos()

Returns the position of both sliders in the range as an object with "first" and "second" properties.

3.9. reset(min, max)

Sets new range and resets sliders to its border.

4. Events

You can pass listener functions to Slider constructor through eventListeners option. This gives you a possibility to react on some events which Slider triggers. Slider triggers the following events.

4.1. onChange event

This event occurs when the value of the slider changes.

In the case of a single slider, the listener is passed a single argument: the value of the slider. In the case of a dual slider, the listener is passed two arguments: the value of the first slider and the value of the second slider.

The following example displays a slider in the 'slider_horiz' DIV. The 'onchange_horiz' function is called when the slider value changes.

<!-- Show the horizontal slider here -->
<div id="slider_horiz"></div>
<div id="horiz_onchange">On Change</div>

<script type=text/javascript>
    // When user release slide icon this gets updated
    function onchange_horiz(int1, int2) {
        var e = document.getElementById("horiz_onchange");
        e.innerHTML = 'First Slider at ' + int1 + '<br>';
        e.innerHTML += 'Second Slider at ' + int2 + '<br>';
        e.innerHTML += 'Slider Length ' + slider.length;
    }

    var slider = new System.Slider({
        // Which div holds the slider presentation?
        parent : "slider_horiz",
        // 2 sliders - Start and End slider
        dual: true,
        // Length - 0 to 100
        length : 100,
        // Where should the slider start?
        start : 25,
        // Where should the 2nd slider start?
        secondStart : 75,
        // H=Horizontal, V=Vertical
        orientation : "H",
        eventListeners : {
            onChange : onchange_horiz
        }
    });
</script>

4.2. newPosition event

This event occurs when the user releases the mouse button or the value of the slider is changed by other means except drag. The arguments passed to the listener are the same as for the onChange event. This event is designed to prevent multiple calls of listener function while user drags the slider, which is true for onChange event.