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 15511 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. [...]
March 30th, 2010 at 12:07 am
[...] Mootools Slider With Two Knobs [...]
March 31st, 2010 at 1:59 pm
[...] Mootools Slider With Two Knobs [...]
April 2nd, 2010 at 10:07 pm
[...] Mootools Slider With Two Knobs [...]
April 3rd, 2010 at 6:14 am
it’s sweet, but second demo bugs in opera 9.6 ..
June 11th, 2010 at 7:56 pm
I had been having trouble getting the “slide steps” version of the slider to work in IE 8, but then I changed the doctype from this:
to this:
and now it works in both FF and IE8.
June 17th, 2010 at 8:12 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 7th, 2010 at 10:22 am
[...] http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider… [...]
September 6th, 2010 at 10:26 pm
[...] Download source code [...]
September 7th, 2010 at 5:27 pm
It is very Useful for me and i am also web developer in ahmedabad.
September 28th, 2010 at 2:48 pm
[...] Slider With Two Knobs, slider orizzontale a due “maniglie” [...]
November 11th, 2010 at 12:17 pm
[...] 55. Mootools Slider With Two Knobs [...]
November 17th, 2010 at 2:57 am
[...] 55. Mootools Slider With Two Knobs [...]
December 29th, 2010 at 9:50 am
I use slider with 2 knob (min, max) and numstep options. And I want numstep effect to 2 knob.
How to add numstep for max knob??? I try to use numstep, but just effect only one knob (min knob)???
April 17th, 2011 at 3:27 am
[...] Website | Demo [...]
August 22nd, 2011 at 5:11 am
[...] Mootools Slider With Two Knobs [...]
September 13th, 2011 at 3:59 pm
[...] Mootools Slider With Two Knobs [...]
September 23rd, 2011 at 2:29 pm
[...] Mootools Slider With Two Knobs [...]
October 4th, 2011 at 7:12 pm
Thanks for sharing, I found a bugs:
Double Knob’s with defined number of steps is only working on the minimal knob, the maximal knob will not go in steps.
I also missed the option to set the height of the slider-background. It is now hard defined in the all ‘rects’
Once again thanks for sharing and the work!!
October 5th, 2011 at 7:40 pm
[...] Mootools Slider With Two Knobs [...]
October 14th, 2011 at 10:01 pm
[...] 55. Mootools Slider With Two Knobs [...]
December 16th, 2011 at 2:51 pm
[...] Mootools Slider With Two Knobs [...]
December 19th, 2011 at 10:37 am
[...] Mootools Slider With Two Knobs [...]
December 29th, 2011 at 2:31 pm
[...] Mootools Slider With Two Knobs [...]
January 22nd, 2012 at 6:39 pm
indoblack…
[...]Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator | Expressing IT[...]…
February 2nd, 2012 at 4:01 am
Photographic camera…
[...]Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator | Expressing IT[...]…
March 16th, 2012 at 8:54 pm
Figure out how to employ SEO WordPress Plugin…
[...]Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator | Expressing IT[...]…
March 24th, 2012 at 10:40 am
[...] 55. Mootools Slider With Two Knobs [...]
May 4th, 2012 at 11:35 pm
[...] Mootools Slider With Two Knobs [Source] [...]
July 9th, 2012 at 7:30 pm
[...] 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 18th, 2012 at 7:44 am
[...] 9. Slide Mootools [...]
October 31st, 2012 at 2:05 pm
[...] Mootools Slider With Two Knobs Your ads will be inserted here byGoogle AdSense.Please go to the plugin admin page to paste your ad code. [...]