You are hereUsing scriptaculous slider with two handles

Using scriptaculous slider with two handles


By Gerd Riesselmann - Posted on 02 May 2006

Since version 1.6 the slider widget coming with the script.actulo.us javascript library can have more than one handle. This for example allows something similar to the Amazon diamond search. I did it here. However, the script.aculo.us documentation isn't up to date currently, so here's how you do it.

First, you need the approbiate markup, one surrounding div for the track and one div for each handle:

Now you can create a slider using the following javascript:


var handles = [$('handle1'), $('handle2'];
var values = [0, 100]; // First handle at 0, 2nd at 100
var slider = new Control.Slider(handles, 'track', {
range:$R(0, 100, false),
step:1,
restricted:true,
sliderValue: values,
onChange:this.onSliderChanged.bind(this),
onSlide:this.onSliderSlides.bind(this)
});

This creates a slider with two handles. The first handle is positioned at value 0, which happens to be the most left one. The second handle is positioned to the most right, which is value 100.

Having the option "restricted" set to TRUE, one slider may not pass by the other one, which in most cases is exactly what you want when you have to sliders. However, there is a teeny-weeny problem with that: Since both handles may still show the same value, which in common is desirable, they also may have the same coordinates, which unfortunately isn't that desirable at all.

In fact, the expected behaviour is that both handles show the same value when positioned next to each other. To achieve this, the slider script must be changed to turn a handle position into a value and a value into a handle position on screen dependend on the handle itself. That is: for a left handle, the value is indicated by the right side, while for a right handle, the value is indicated by the left side.

I hacked the original slider.js file to achieve this. You can download it here. A patch is also available.

Hey this is pretty nice...thanks for making this available.
I would like to create a timeline editor, similar to Macromedia Captivate or Producer for PowerPoint 2003.
Check my blog entry for what I'm trying to do. Do you think this is easily possible in scriptaculous?

http://www.dotnetjunkies.com/WebLog/joshuagough/archive/2006/06/17/14064...

Thanks
Josh

Hi,
I have been trying to implement range slider control but could not get it work as shown in your example at http://www.informationsarchiv.biz/.

I would really appreciate if you can let me know that the javascript you have mentioned, should be called from which event/action.
As per the reply from Josh Gough, I have looked into his implementation and he is calling JavaScript on window.load() and he does not have onChange & onSlide events.

Thank you for wonderful work!
-Dipak

I tried this code and got the following javascript error:

Error: Class is not defined
Source File: nnnnnnn
Line: 35

if(!Control) var Control = {};
Control.Slider = Class.create(); ----- In Here

AM I missing something very obvious? I am relatively new to this.

To Yuri:
You have to include the prototype class before using Class.create(); You can find prototype here

Hi,

Thanks a lot.

It helped me a lot and served my purpose.

Thanks
Raj

Hi,

this slider script is very cool!! I try to build a priceslider with handlers for minimum and maximum prices. Everything seems fine but i got some problems with the positioning of the slider handles.

They will not use the whole width of the sliderbar so that the minimum slider is already shown at the beginning of the slider but the maximum slider is shown directly after the mimimum handle in the middle of the slider

I think it depends on the css i use. Can anyone give me an example where i could see how i have to setup my css to show the handles correctly. Currently my css looks like

#priceslider {background:url(/uploads/tf/sBack.gif) 0px 0px no-repeat;height:20px; margin-top:10px; margin-bottom:10px;width:256px;}
#minslide {background:url(/uploads/tf/sHandle.gif) 0px 0px no-repeat;float:left; width:20px;}
#maxslide {background:url(/uploads/tf/sHandle.gif) 0px 0px no-repeat; width:20px;}

Thanx a lot

Udo

Hi,

i solved my problem. Everythings working fine!

Greetings + Thanks

Udo

Please help me to impliment this in a web application which is alrady developed in ASP.NET 2.0. Ajax is also used with that applicarion.

I tried to implement two sliders. Each has its own value to show. The problem is that no matter which slider is moved, it always changes the value on the first slider. Do I need to have two sets of Control.Slider.prototype with different names or is there an easy way to it? Did try two name sets of

var handles_stp = [$('handle1_stp'), $('handle2_stp')];
var values_stp = [0, 100]; // First handle at 0, 2nd at 100
var slider_stp = new Control.Slider(
handles_stp,
'track_stp',
{ range:$R(0, 50, false), step:1, restricted:true, sliderValue: values_stp }
);

but nothing helps. Please advise.
SM

I solved it. Diff name will do.

My code doen't work for some reason. I'm sure its something really small such as a library not being referenced. The error is: "$ is not defined". The following is what I have:

var handles = [$('handle1'), $('handle2')];
var values = [0, 100]; // First handle at 0, 2nd at 100
var slider = new Control.Slider(handles, 'track', {
range:$R(0, 100, false),
step:1,
restricted:true,
sliderValue: values,
onChange:this.onSliderChanged.bind(this),
onSlide:this.onSliderSlides.bind(this)
});

Can some one help me with this?

Thank you :)

type
-script type="text/javascript" src="some_folder_you_like/prototype.js"- -/script-

in header

Hi,
I m trying to use your slider code.
I would like to get defined values (like 10,20,30, etc...)
Here's the code I use
var handles = [$('handle1'), $('handle2')];
var values = [0,100]; // First handle at 0, 2nd at 100
var slider = new Control.Slider(handles, 'track', {
range:$R(0, 100, false),
increment:10,
step:10,
restricted:true,
sliderValue: values,
onChange:function(v){alert(v)}
});

When I changed the slider position, I get values like 0,25.28
How can I get rounded values.
I tried to defined the values [0,10,20,30...,100], but I still get decimal values.

Any help ?

Stan