Javascript Slider

BY CARPE DESIGN

Find later versions here.

The CARPE Slider is easy to incorporate in your web site. It's designed with DHTML, a combination of (X)HTML, Cascading Style Sheets (CSS) and JavaScript. They are fast and compact. They do not contain any image elements or applets. This minimizes the number of server requests and keeps the page size to a minimum. In the first examples below we show how the design can be customized, and how you can use the slider to collect user data in a (X)HTML form. The slider is a perfect alternative to the text input tag in (X)HTML, when the expected value is limited to a certain interval. Other ways to use the CARPE Slider are explained below.

Try the horizontal sliders above. They all range from 0 to 100, but they work differently. The green slider allows all intergers from 0 to 100, but the others have a limited number of allowed values. The display will only display the allowed number of values, in the specified interval, and the value cannot be changed by the user. This eliminates the need for a form validation process.

The vertical sliders below demonstrate how the same size sliders can have different value ranges and how the number of decimals can be specified. They range from -25 to 25, -250 to 250, and -2.5 to 2.5 respectively. The number of decimals have been specified to 0, 0, and 1 respectively. The display will only display the allowed number of values, in the specified interval, and the value cannot be changed by the user. This eliminates the need for a form validation process.

To put a CARPE Slider in your own web page you need to download the slider script [slider.js] and the default slider stylesheet [slider_default.css]. Right-click on the links and choose 'save target' to download the files.

You also need to link to the files from the head section of your (X)HTML page. Change the href and src attributes if you put the code and/or stylesheet files in a different directory than your (X)HTML page.

<link
    href="slider_default.css"
    rel="stylesheet"
    type="text/css" />

<script
    language="JavaScript"
    src="slider.js" >
</script>

The HTML for the slider and display goes anywhere within the body tag, and normally within a form element. A horizontal slider would have the following code:

<div class="horizontal_track" >
    <div class="horizontal_slit" >&nbsp;</div>
    <div class="horizontal_slider"
        id="your_slider_id"
        style="left: 0px;"
        onmousedown="slide(event, 'your_slider_id',
        'horizontal', 100, 0, 100, 101,
        0, 'your_display_id');" >&nbsp;</div>

The default position for the slider is specified in the style attribute. In this example the slider position is set to 0 pixels. The JavaScript function slide is called like this:
slide(event, '[id of the slider itself]',
    ['horizontal' or 'vertical'],
    [the slider length in pixels (integer)],
    [the minimum display value],
    [the maximum display value],
    [the number of accepted values in the interval],
    [number of decimals to display],
    '[id of the display]')

The corresponding display would look like this:

<div class="display_holder" >
    <input id="your_display_id"
        class="value_display" type="text"
        value="0" onfocus="blur(this);" /></div>

---

Copyright © 2004 Carpe Design. All rights reserved.