Using scriptaculous slider with two handles
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:
<div id="track"><div id="handle1"></div><div id="handle2"></div></div>
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.
Related Articles
- The Holy Grail CSS Layout Fix for IE7: ... create a three-column, source-ordered, table-less layout with a fluid column in the middle. It is used by the Comic Marktplatz , for ... Hi, I tried that fix but it didn't work for me. I am using the padded version on alistapart and I changed both of my left and right ...
- One feed module to rule them all: ... but similar error this time. Maybe some interaction with the node_privacy_byrole module I am using. Location /node/93/feed Message Unknown table 'n' in on clause ...
- Apache Xerces' weird error message: For one of my projects I'm using Apache's Xerces C++ XML Parser and run into this strange error: ... "File not found" here, because I was was calling parse() with the data to be parsed, while Xerces expects a file name here. Silly me. However: Here's how to parse an XML string using Xerces SAX parser. you need to use a MemBufInputSource: ...
- Focus first Form field with jQuery: ... but you get the idea. Impressing. Impressing. Using some of jquery's Using some of jquery's custom selectors this works a treat. ...
- Display related nodes in Drupal: ... } } ?> Update: Now using search_keywords_split() rather than just explode() to extract keywords ...
Comment by Josh Gough
June 17, 2006 - 16:39
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