DHTML Slider
The CARPE Slider 1.5.1
This cross-browser slider is easy to incorporate in your web site. It's designed with 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. The sliders below uses the default stylesheet, except for the colors. They differ a little in funtionality though. The slider is a good alternative to the text input tag in (X)HTML, when the expected value is limited to a certain interval and/or when only a limited number of values in the interval are allowed. Adding a slider is as easy as adding an HTML element. Settings are easy to modify with a few attributes of the slider element. No javascript is needed within the document body. The slider can be styled with Cascading Style Sheets CSS (inline, in the document head or in a separate file).
Try the horizontal sliders above. They range from 0 to 100 (the default range), 100 to 200, 1 to 9, and 0.1 to 0.3 respectively. The first two sliders don't have a limitation on the number of allowed values. This means that the number of possible values is the same as the sliding distance in pixels. The following two (green and blue) have a maximum of 10 and 3 values respectively. This means that the slider will snap back to these allowed values when you stop sliding. The blue slider is set to display 1 decimal. The others use the default value, which is zero decimals. The slider settings can be used instead of a form validation process.
A slider can have two different orientations – 'horizontal' or 'vertical'. The default orientation is 'horizontal' but below are two vertical sliders. They range from 0 to 1, and -250 to 250 respectively. The number of decimals have been specified to 1, and 0 respectively. The red slider's display can be edited by the user. The green slider's display is locked using the slider attribute
typelock, and can only be changed by moving the green slider.To put a CARPE Slider in your own web page you need to download the slider script [slider.js] and the default slider stylesheet [default.css]. Right-click on the links and choose 'save target' (or equivalent) 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. Your page can be HTML or XHTML.<script
language="JavaScript"
src="slider.js" >
</script><link
href="default.css"
rel="stylesheet"
type="text/css" />Pages with CARPE Sliders (version 1.5 and earlier) vill not validate as XHTML because of the special slider attributes. The (X)HTML for the slider and display goes anywhere within the body tag, and normally within a form element. A horizontal slider, with all slider attributes set, would have the following code:
<div class="carpe_horizontal_slider_track">
<div class="carpe_slider_slit"> </div>
<div class="carpe_slider"
id="your_slider_id"
orientation="horizontal"
distance="100"
display="your_display_id"
style="left: 0px;"> </div>
</div>It's important that you use the proper class names. Both functionality and styling depend on it. The slider attributes should be set. A slider without the slider attributes will work, but with the default settings (shown above). The default position for the slider is specified in the style attribute, as
left: [position in pixels]px for horizontal sliders, and top: [position in pixels from top]px. In this example the slider position is set to 0 pixels. The JavaScript will set the sliders up automatically when the page is loaded.The corresponding display would look like this:
<div class="carpe_slider_display_holder" >
<input class="carpe_slider_display"
id="your_display_id"
name="your_var_name"
type="text"
from="0"
to="100"
valuecount="101"
value="0"
typelock="off" /></div>Make sure your display id is the same as the display-attribute for the corresponding slider. The display attributes should be set. A display without the attributes will work, but with the default settings (shown above). The default value for the display is specified in the standard value-attribute. The typelock attribute prevents the user from typing directly into the display if set to "on".
The CARPE Slider (version 1.5 and earlier) is "linkware" for non-commercial use in normal web pages (forms). Put a small link near the slider or at the bottom of the page or with your other copyright info. The link text may be something like "sliders by CARPE Design", and the target URI should be http://carpe.ambiprospect.com/ or http://carpe.ambiprospect.com/slider/ For other uses (web applications or any commercial use) you can buy a custom license that suites your needs and budget. Send me a mail. The address is on the start page.
Copyright © 2003- Carpe Design. All rights reserved.
