Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator

October 24th, 2008 by Nikhil

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 [download#12#hits] times)
mootools double pinned slider

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.

Tags: , ,


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


89 Responses to “Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator”

  1. 70 New, Useful AJAX And JavaScript Techniques | Rystereology Says:

    […] 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. […]


  2. nerd Says:

    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);}


  3. Bill Bartmann_ Says:

    Great site…keep up the good work.


  4. Angela J Says:

    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!


  5. Joey Says:

    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.


  6. Joey Says:

    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…?


  7. Robert Says:

    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.


  8. 70 Great, Useful AJAX And JavaScript Techniques « Social-Press Says:

    […] 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. […]


  9. I migliori plugin Mootool — Studio404 Web Agency Says:

    […] Slider With Two Knobs, slider orizzontale a due “maniglie” […]


  10. Neuron Technologies Inc – 70 New, Useful AJAX And JavaScript Techniques Says:

    […] 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. […]


  11. 28 Useful JQuery Sliders You Need To Download | Design your way Says:

    […] Mootools Slider With Two Knobs […]


  12. 28 Useful JQuery Sliders You Need To Download « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates Says:

    […] Mootools Slider With Two Knobs […]


  13. 28个流行的jQuery Slider | Booto'Blog Says:

    […] Mootools Slider With Two Knobs […]


  14. mootools fan Says:

    it’s sweet, but second demo bugs in opera 9.6 ..


  15. Louis Says:

    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.


  16. Geek is a Lift-Style. »Archive » 70 New, Useful AJAX And JavaScript Techniques Says:

    […] 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. […]


  17. 100 Must Try Mootools Plugins Says:

    […] http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider… […]


  18. Must See the best jQuery Examples Says:

    […] Download source code […]


  19. vainfotech Says:

    It is very Useful for me and i am also web developer in ahmedabad.


  20. i migliori mootools - bloggissimo Says:

    […] Slider With Two Knobs, slider orizzontale a due “maniglie” […]


  21. 60 Excellent jQuery Image Sliders and Tutorials — tripwire magazine Says:

    […] 55. Mootools Slider With Two Knobs […]


  22. 60 Excellent jQuery Image Sliders and Tutorials | Psd tutorials Says:

    […] 55. Mootools Slider With Two Knobs […]


  23. Han Tran Says:

    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)???


  24. PandaDesignRo.com » A collection of cool Mootools plugins Says:

    […] Website | Demo […]


  25. SlideDeck jQuery plugin | Stevelizardi.com Says:

    […] Mootools Slider With Two Knobs […]


  26. 28 Useful JQuery Sliders You Need To Download « Designer Universe Says:

    […] Mootools Slider With Two Knobs […]


  27. 28 Useful JQuery Sliders You Need To Download « RPL Class Says:

    […] Mootools Slider With Two Knobs […]


  28. Paul de Vries Says:

    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!! 😀


  29. 20 Outstanding Jquery Sliders | OUR DISCOVERY Says:

    […] Mootools Slider With Two Knobs […]


  30. TaiLieuLapTrinh.com » 60 Excellent jQuery Image Slider Roundup Says:

    […] 55. Mootools Slider With Two Knobs […]


  31. 28 Useful JQuery Sliders You Need To Download « Tutorials – Ngalam City Says:

    […] Mootools Slider With Two Knobs […]


  32. indoblack Says:

    indoblack…

    […]Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator | Expressing IT[…]…


  33. Figure out how to employ SEO Wordpress Plugin Says:

    Figure out how to employ SEO WordPress Plugin…

    […]Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator | Expressing IT[…]…


  34. 128 jQuery image slider with transition effects | ONLINE WEB HELP AND TUTORIALS Says:

    […] 55. Mootools Slider With Two Knobs […]


  35. 90 Of The BEST FREE jQuery Sliders | Pulse2 Technology and Social Media News Says:

    […] Mootools Slider With Two Knobs [Source] […]


  36. 70 New, Useful AJAX And JavaScript Techniques | PSDSir Says:

    […] 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. […]


  37. 10 sliders JQuery à télécharger gratuitement Says:

    […] 9. Slide Mootools […]


  38. 28 USEFUL JQUERY SLIDERS YOU NEED TO DOWNLOAD » Web Design & Web Development: HTML, CSS, JQUERY, PHP Says:

    […] 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. […]


  39. Download Best 28 Useful jQuery Sliders | WebQeep Says:

    […] Mootools Slider With Two Knobs Mootools Slider With Two Knobs […]


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter