Carpe Slider 2.0 Beta

BY TOM HERMANSSON SNICKARS

Version 2.0 of the CARPE Slider is very different from earlier versions, at least behind the scenes. The main difference is that the slider object is separated from displays or other controlled elements. It can work as a separate form element, but you can also connect it to any (X)HTML element or Javascript object. Another important change is that the slider can be included in a page as a simple (X)HTML input element, or with the Javascript new operator. Other features and improvements include:

no image files needed
keyboard control
extended mouse control
validating HTML and XHTML
more visual feedback
more styling options
styling with or without CSS 1-3
single global namespace
JavaScript framework agnostic
graceful degradation for no script users

The Carpe Slider 2.0 has a hidden input element with a value between 0 and 1. The value is not visible to the user, but it is accessible to the server if the form is submitted or to any element that is associated with the slider.

A slider display is a typical element to associate a slider with, but any element's or Javascript object's attributes can be connected to any slider. This increases the flexibility of the code and the number of possible applications. The slider below is connected to the (X)HTML input element on the right:

Try the horizontal slider above. You can set the slider position by dragging the slider knob, or click on the slider panel, or use the arrow keys on your keyboard while the slider is active. You can activate the slider by clicking it, or with the tab key on your keyboard as you would with any other form element.

Adding a slider to your web form is like adding any other input element. You just have to include the class name carpe-slider in the class attribute:

<form>

    <input class="carpe-slider"

        id="my_first_slider"

        name="my_first_slider"

        type="text" />

</form>

A slider can also be added to a page or web application with JavaScript:

<script type="text/javascript" > new CARPE.Slider('my_first_slider'); </script>

To make it all work you also need to include the slider script [carpe_slider.js], common Carpe methods [carpe_common.js], and the default slider stylesheet [carpe_slider.css] in the head of your document, and put the script and style files in the directory you specify:

<head> ... <script src="scripts/carpe_common.js" type="text/javascript" </script> <script src="scripts/carpe_slider.js" type="text/javascript" </script> <link href="styles/carpe_slider.css" type="text/css" /> ... </head>

In the example above, the script and stylesheet files are placed in the directories 'scripts' and 'styles' respectively. Those directories are in the same directory as your (X)HTML file. Change the path according to your prefered locations.

There are many ways to customize a slider. You can style your sliders with CSS (individually by their id, or collectively with classes), or through JavaScript when you create a new slider (individually). Functionality can be customized with instructions in the class attribute in (X)HTML, or with the JavaScript object constructor. Here is an example with most properties specified:

<form>

    <input class="carpe-slider

        orientation-horizontal

        target-my_first_display

        size-200

        position-100

        stops-10"

        id="my_first_slider"

        name="my_first_slider"

        type="text" />

</form>

It's important that you use the proper class name. Both functionality and styling depend on it. Orientation is specified by orientation-vertical or orientation-horizontal (default). The target element is specified with target-id, where id is the id of the target element. The length of a slider (or height for vertical sliders) is set with size-x, where x is the length/height in pixels. The default size is calculated from CSS values in the stylesheet. The initial position for the slider knob is set with position-x, where x is the position in pixels from the left (or from the bottom for vertical sliders). The default position is 0. With stops-x you set how many snap positions the slider should have. As a default there is no snapping.

The above slider can also be created with JavaScript like this:

<script type="text/javascript" >

    new CARPE.Slider('my_first_slider', {

        'orientation': 'horizontal',

        'target': 'my_first_display',

        'size': 200,

        'position': 100,

        'stops': 10,

        'name': 'my_first_slider' });

</script>

Functionality and styling of an existing slider can also be changed with JavaScript.

Pages with CARPE Sliders (version 2.0) will validate as XHTML because the special attributes are no longer used to customize the sliders. The (X)HTML for the slider goes anywhere within the body tag – normally within a form element.

The CARPE Slider 2.0 is available with two different licenses. One for commercial projects (including non-profit and governmental agencies/companies/institutions) that need to own their code, and one open source license for personal/non-commercial uses. Send me a mail with any suggestions or questions. The e-mail address is on the start page.

Note that this is a draft document, and that the code is still in beta. More info will be added soon.