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.
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;
}
.slidername_red, .slidername_yellow{
cursor:move;
}
span.red{
color:#c6523b;
}
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;
}
Now that we have this function we can call the base function that will create the slider, and will look like this:
dualSlider('price_yellow','price_red','price_track',buildsteppervalues(0,200000,1000));
function dualSlider(first_handle,second_handle,track,values){
Parameters:
1. first_handle: the id of the image for the minium value.
2. second_handle: the id of the image for the maximum value.
3. track: the id of the div that will do as background of the slider.
4. stepper values: the array of values that the slider can assume, generated by buildsteppervalues
Let's see the dualSlider function code. This function must create the slider using the Control.Slider inside the script.aculo.us and set the events to change the value of the display tag, on time onSlide and onChange. This are the two callbacks of the slider controls of script.aculo.us and we will set without using the new Event.observe function.
function dualSlider(first_handle,second_handle,track,values){
//first we set the minimum and maximum range value of the array
var range_min = values[0];
var range_max = values[values.length-1];
//than we create a new object Control.Slider
s1 = new Control.Slider(first_handle,track,{range:$R(range_min,range_max),maximum:range_max,values:values});
//and then we set the callbacks function
s1.options.onChange = function(value){
value=value.toFixed();
$(first_handle+'_tag').innerHTML = value;
$(first_handle+'_form').value = value;
};
s1.options.onSlide = function(value){
value=value.toFixed();
$(first_handle+'_tag').innerHTML = value;
};
//we need to do this two time, because we want a dual slider
s2 = new Control.Slider(second_handle,track,{range:$R(range_min,range_max),maximum:range_max,sliderValue:range_max,values:values});
s2.options.onChange = function(value){
value=value.toFixed();
$(second_handle+'_tag').innerHTML = value;
$(second_handle+'_form').value = value;
};
s2.options.onSlide = function(value){
value=value.toFixed();
$(second_handle+'_tag').innerHTML = value;
};
s2.setValue(range_max);
}
Others detail about the Control.Slider object can be founded on the script.aculo.us documentation.
Conclusion
We must consider two terms. The first that on the callback we need this code:
value=value.toFixed();
This function will delete the decimal numbers. That second important things, this also inside the callbacks, i've modified the value of the display tag using innerHTML.
Another problems, the red slider is a little out on the left, the first slider create this effect: the images are inline, soo the second slider is out on left how much is large the first slider. A simple CSS code will resolve this:
.slider_red{
margin-left:-18px;
}