The script.aculo.us library is the first collection of visual effects developed using javascript. The first 3 functions are:

1. effects - new Effect.effectName() and drag&drop control - new Control.controlname()
2. events - new Event.observe([click,mouseover,mouseon,etc], elements id, callback function)
3. ajax - new Ajax.update()

Other interesting functions of script.aculo.us are "edit in place", "drag&drop" and sliders. In this post we will look to the sliders controll and particulary to how to implement a dual slider in a real application, and select an interval range of value.

To do this we will need two overlapping sliders, and two images as selector. This can be transparent gif or png.

Download the image files

The first image is very close. This will be used as repeated bakgrounds for the div elements used for the sliders.
The others two image are the control: the yellow for the minimum value, and the red for the maximum value.

So let's see how will look the html of the sliders:

<div id="price_track" class="slidername_track">
<img id="price_yellow" class="slidername_yellow" src="images/i_slidername_yellow.png" />
<img id="price_red" class="slidername_red" src="images/i_slidername_red.png" />
</div>

The functions that will be created will need to have a standard name. We need a handler (id of the element) pointing the background div, where will cross the slider, and we will need an handler for every slider. We will use the name "sildername_track", "slidername_yellow",
"slidername_red". Soo if we need onther instance in the same page we must change only the "slidername" part.

Also we need something that will display the range value selected live when the slider moves. I've used a standard paragraf with the respectiv color yellow red.

<p>Prices from $<span class="yellow" id="pricename_yellow_tag">0</span> to $<span class="red" id="pricename_red_tag">200000</span></p>

Here we can observe that we need other two handlers, that i've named like pricename_yellow_tag pattern and pricename_red_tag. Also you can see that i've setted the initial value of minimum and maximum, 0 and 200000.

Here you can see the CSS used for the example:

.slidername_track{
margin:auto;
width:80%;
background:url("images/b_slidername.png") repeat-x;
}

span.yellow{
color:#e48800;
}

Now it's time for the intresting part of this example, the javascript code. When we have the HTML code, we need a function to transform the two triangle images in a slider that will update the price. Using only script.aculo.us, we can create the slider objects calling new Control.Slider two times for every slider.

Also we need to transform the script.aculo.us results, because we have a result from 0 to 1, but we need form 0 to 200000. So we need another function that transform those ugly decimal number.

Another prbolem that we will find is about stepping of the sliders. So i've created another function that with the min, max and step parameters and will return an array with all values that the sliders can use.

function buildsteppervalues(min,max,step){
var vals=[];
y=0;
for(i=min;i<=max;i+=step) {
vals[y]=i;y++;
}
return vals;
}