Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator
I had been looking for a double pinned slider (slider with two knobs , minimum and maximum) using mootools. Though , I did find a few well done double pinned slider in the mootools forum, The only problem was that all these sliders dint have the selected range marker. Finally! I decided to create my own. Well! I did use the original code and modify it to have a slider background that indicated the range selected visually, as in my example below. The BLUE areas indicates the range of value chosen.
View Version 2.2 Demo | Download Mootools Double Pinned Slider Version 2.2 (Downloaded 4585 times)
You can very easily change the look and feel of the range indicator ( in blue in the above example), slider knob, the slider track by modifying the slider.css as required.
Do drop me a comment if you find it useful.
Subscribe to by Email
July 21st, 2009 at 8:55 am
[...] MooTools Slider with two knobs This is the MooTools Slider with two knobs (i.e. a double-pinned slider), with range indicator. Check out the demo here. [...]
August 17th, 2009 at 8:30 am
I didn’t read all the comments so this might have been posted already but setHTML is not a function.
Change: .setHTML(‘min ‘+pos.minpos);$(’slider_minmax_max’).setHTML(‘max ‘+pos.maxpos);}
To this: .set(‘html’, ‘min ‘+pos.minpos);$(’slider_minmax_max’).set(‘html’, ‘max ‘+pos.maxpos);}
September 11th, 2009 at 3:36 pm
Great site…keep up the good work.
October 28th, 2009 at 7:01 am
Hey Nikhil,
You undoubtedly have the best slider around! And believe me I have searched/checked out them all!
I can’t find any other decent slider, especially one that looks as good as yours and has 2 knobs, that can be set up vertically. I assume that yours can be as it is an option in the setup. I’ve spent quite a bit of time changing some of the code and changing some of the styles, but I can’t seem to get it to work.
Would it be possible for you to post some code showing how to get the vertical slider to work?
You are my last hope! My designer used your slider in her design, but made it vertical – and it just doesn’t work without it! I really need your help!!!
Anything you can post on this matter or send to me directly would be GREATLY appreciated!
October 29th, 2009 at 12:37 am
Hi, this is great! I would love to use it, however, it breaks other mootools code on my page…
I assume this is happening because there is conflict between the mootools js file that is provided with the source code and the mootools js file that I was already using.
My question is: is the ‘mootools12_all_p.js’ file customized specifically to this slider in any way? If so, then I think I’m out of luck and will not be able to use it, since I can’t include BOTH js files (as this breaks current functioning code).
But if that file has not been altered from the original mootools source code in anyway, then is there any way you could list which of the ‘more’ features (from here: http://mootools.net/more) is required for this to work? That way, any user can always use the latest mootools-more.js file and not have to use the ‘mootools12_all_p.js’ file that is included.
October 29th, 2009 at 12:40 am
Btw, I have tried downloading a mootools-more.js file that includes ALL the extra plugins, but the slider did not work
(although the rest of my existing code did continue working). So I’m guessing that means the ‘mootools12_all_p.js’ is required…?
December 6th, 2009 at 6:35 am
Hi Nikhil, thanks for the great work on this two-knob slider. I have been able to modify almost everything I need except one thing. My scale is 1 – 192, and I have to be able to get the sliders directly next to each other (actually they would visually overlap) so the use has the option to select 100-101 for example. But right now I can’t get them close enough. If I move the max knob I can get 100-107. By moving the min knob I can get 101-107.
I made the knob images smaller and modified the knob div in css so it looks better when they are close together. But I can’t figure out how to get them closer. Can you point me in the right direction?
Thanks again for your work on this.
December 30th, 2009 at 3:09 am
[...] MooTools Slider with two knobs This is the MooTools Slider with two knobs (i.e. a double-pinned slider), with range indicator. Check out the demo here. [...]
January 10th, 2010 at 7:42 pm
[...] Slider With Two Knobs, slider orizzontale a due “maniglie” [...]
January 25th, 2010 at 3:53 am
[...] MooTools Slider with two knobs This is the MooTools Slider with two knobs (i.e. a double-pinned slider), with range indicator. Check out the demo here. [...]