Carpe Slider 2 version 2.0.7

BY TOM HERMANSSON SNICKARS

0

Version 2 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 one (or many) (X)HTML elements, JavaScript objects, or functions (that will be called on mouseup). 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:

Version 2.0.6 focuses on performance, clean code, minor features and bug fixes. It's now possible to use a source property or attribute to set an initial slider value. This is useful when the server returns a new value for the target element, but not for the slider, on a page refresh or new content being loaded. The target(s) attribute can now take objects and object properties as well as elements and properties of elements. There are also the decimals and zerofill attributes. See details below.

The Carpe Slider 2 has a hidden input element with a value between 0 and 1 (as default). 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 properties or attributes can be connected to any slider. The sliders below are connected to the (X)HTML input elements on the right. The first slider goes from 0 to 1 and has decimals set to 2 and zerofill set to yes. The second slider has orientation set to vertical, goes from 1 to 11 and snaps to interger values (stops is set to 10). The third one is disabled.

Try the horizontal and vertical sliders 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. There are even more sliders to try on the Carpe Slider 2 Test Page.

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"
           type="text" />

</form>

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

<script type="text/JavaScript" >
    CARPE.Sliders.make('my_first_slider');
</script>

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

<head>
...
<script src="carpe_slider.js"
    type="text/javascript" </script>
<link href="carpe_slider.css"
    rel="stylesheet" />

...
</head>

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
        from-0
        to-1
        stops-10
        decimals-2
        zerofill-no
        source-my_first_display"
        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 (or identifier in the global JavaScript namespace). 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 style sheet. 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.

There is a new way to customize sliders from version 2.0.1. It's compatible with HTML5 and makes use of some new attributes for the input tag and the custom attributes with the prefix data-, allowed in HTML5:

<form>
    <input class="carpe-slider"
        data-carpe-orientation="horizontal"
        data-carpe-targets="display2 display3"
        data-carpe-size="200"
        data-carpe-position="100"
        data-carpe-from="0"
        data-carpe-to="1"
        data-carpe-stops="10"
        data-carpe-decimals="2"
        data-carpe-zerofill="no"
        data-carpe-source="display2"
        min="0"
        max="1"
        step="0.1"
        id="my_first_slider"
        name="my_first_slider"
        type="range" />

</form>

It's still important that you use the proper class name and type="range" with this method. Orientation is specified with the custom attribute data-carpe-orientation; data-carpe-orientation="vertical" or data-carpe-orientation-horizontal (default). The target elements (yes, there can be more than one now) are specified with data-carpe-targets="id1 id2 id3 ... idN", where id1 ... idN are the ids of the target elements. The length of a slider (or height for vertical sliders) is set with data-carpe-size="x", where x is the length/height in pixels. The default size is calculated from CSS values in the style sheet. The initial position for the slider knob is set with data-carpe-position="x", where x is the position in pixels from the left (or from the bottom for vertical sliders). The default position is 0. The data-carpe-from and data-carpe-to are not recommended but can change the range of the possible slider values (see also min/max attributes below). With data-carpe-stops="x" you set how many snap positions the slider should have. As a default there is no snapping. The min and max attributes sets the lowest and highest allowed value for the slider (not necessarily the same as the display value). It's not recommended to use these. The values will default to 0 and 1 respectively, and can be converted for display or other applications in the target element. The step attribute is an alternative way to customize snapping. It overrides the data-carpe-stops attribute and the stops-x class name. It also works differently. The value specifies how much the slider value should change per snapping. An empty attribute value means no snapping, which is also the default behaviour. Note that the last snapping distance may be different from the specified value unless you make the range of the slider a multiple of the step value. The decimals attribute

This method of customizing should be avoided if you use HTML 4.x or XHTML and want your mark-up to validate. It's intended for HTML5 and takes advantage of some of the news in that standard. Note the type attribute that is set to range. It's an HTML5 attribute and it's needed if you want to use the min, max, and/or step attributes.

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

<script type="text/JavaScript" >
    CARPE.Sliders.make('my_first_slider', {
        'orientation': 'horizontal',
        'targets': 'display2 display3',
        'size': 200,
        'position': 100,
        'stops': 10,
        'source': 'display2',
        'decimals': 2,
        'zerofill': 'yes',
        'min': 0,
        'max': 1,
        'from': 0,
        'to': 1,
        'name': 'my_first_slider'
});
</script>

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

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

The CARPE Slider 2.0.x is available with two different licenses. One for commercial projects (including non-profit and governmental agencies/companies/institutions) at USD 99, and one free open source license for personal/non-commercial uses. Send me an e-mail with any suggestions or questions. The e-mail address is on the start page.