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. wanlee Says:

    Very cool! I’ve been looking for something like this. Is it possible to have a fixed gutter background image that clips instead of moving from left to right? I’m trying to work on this now and have so far been unsuccessful. 🙁


  2. Nikhil Says:

    It is nice thought! Thanks! Never thought about that. I will try it too!


  3. Nikhil Says:

    Hey Wanlee!

    I think I might got ( or am atleast close to) the solution you were looking for. I have changed the Look (made it with a spectrum gradient , rather that single colour) of the bkg_slider.gif, so just make sure that the image is actually getting clipped. This image, which was earlier the background image for the slider range indicator division, Is now placed in the HTML, absolutly positioned with the slider container.

    I have posted my working files of this version here…

    http://developer.expressionz.in/downloads/mootools_double_pinned_slider_with_clipped_gutter_image/slider_using_mootols_1.2.html

    The code/css of the earlier version is just comment , for users to be able to make out the difference.

    Also, I have left a red border of the image as well … which you can remove!

    Hope that Helps!


  4. Nikhil Says:

    Just a PRO and CON of the version suggessted by Wanlee…

    PRO : Now you can range Image , that can indicate range with its Color too … What I mean is for eg. you could have an image with green,orange and red ares, so the selected range will indiate the nature of the range selected.

    CON: The slider image is shown with its full width , until the complete Script is loaded and run


  5. wanlee Says:

    ah yes… fantastic! very cool, Nikhil! I actually got a working version as well but I believe yours may be a bit more efficient. 😉

    Here’s another suggest: Is it possible to have the knobs butt-up against each other instead of crossing over?

    Excellent work, Nikhil! Kudos! 🙂


  6. Nikhil Says:

    Managed to fix the cross-over of the two knobs … updated the file , follow the link in my comment above.


  7. wanlee Says:

    hey nikhil! nice work again! i noticed that the minKnob still crosses over but only on the first drag. after the drag is initialized we’re all good! does the same happen to you?


  8. Nikhil Says:

    Hi Wanlee!
    There is this issue in the version , as you mentioned, about the first slide of the min knob. I seem to know where the problem lies, but havn’t been able fix since yesterday … hope to crack it soon.

    Thanks Tons for pointing the problem out!

    Nik


  9. Nikhil Says:

    Hey Wanlee!

    Working early in the morning on such issues really works … managed to fix the issue( of Min Knob crossing over the Max Knob, the first time) this morning … I have already uploaded the fixed slider.js script as version 2.1

    Again! Thanks for your help is spotting and suggesting changes.

    Nik


  10. Wanlee Says:

    Hey Nik! Been trying your slider and it works great but check this out:

    I tried setting the ‘start’ param to 5 and the ‘end’ param to 15 and it makes the clipping wonky. Also, both sliders end up with the same value. Here’s something that would be cool: instead of the sliders butting up together, have the max slider stop at the next number greater than the min slider.

    Also, how can i turn snapping on?


  11. Nikhil Says:

    Hey Wanlee!

    Thanks as usual. You are doing test work , That I should have. Really appretiate it.
    Been busy and will be for a few days , with a project. Will get back to this as soon as possible.

    Thanks again
    Nik


  12. Mauricio Hernández Says:

    Hi Nikhil, could you tell me which line is fixing the cross-over of the two knobs or maybe which lines are doing it.


  13. Brian Says:

    Disclaimer: I’m not an expert at MooTools development yet, so unfortunately I’m gonna be one of those guys who is going to make suggestions he can’t quite implement himself. Please keep in mind this isn’t even a “feature request” because I’m not expecting anybody to do this for me. I merely want to document that there is interest in further additions.

    I want to use this double slider for selecting a range of time.

    The first extra feature I’d love to have is to bump the sliders in 15 minute “steps”. Instead of being able to slide through 1, 2, 3, …, 14, 15 I want to go 0, 15, 30, 45, 60, …, etc. Is there a way to get the slider to snap to these increments? (I realize I could use a multiplier on the output value of the scale’s knobs, but a single pixel per “step” is too fine-grained. I want nice big 10 pixel “jumps” between each step on the scale.)

    Second, I would LOVE to be able to drag the range itself. Keep the distance between the knobs the same, but grab the “middle part” and slide it back and forth along the scale. This is probably a lot trickier to accomplish, but man would I be thrilled to have this.

    Anyway, thanks for the awesome implementation you’ve already provided!


  14. Nikhil Says:

    Hey Mauricio,

    Im checking the overlap maily in the CheckStep function of the Silder Class ( it must around line 174)

    The limit of Minimun Knob is set in “this.drag.options.limit” and similarly the limit for Max Knob in “this.maxdrag.options.limit” ….

    Also, I had a problem with the overlaping still happening the first time ( i.e. until the CheckStep function is called atleast once.) so I had to do the add a check to see if the slider is being initialied , and do the following in the “SetMax” function ( arounf line 138 in the silder.js)
    ——————–
    if(this.options.isinit){
    var lim = {}; var mi,mx;
    mi = – this.options.offset;
    mx= parseInt(this.maxknob.getStyle(‘left’)) – this.options.offset-4 ;
    lim[this.z] = [mi, mx];
    this.drag.options.limit = lim;
    this.options.isinit = false;
    }
    ————————–


  15. Adelino Says:

    Fantastic job Nikhil! I love it.

    For those having problems with the latest Mootools version, you can modify the javascript (in the HTML page of the demo) as follows:

    You will need to download both MooTools versions (core & more).

    // ON LOAD
    window.addEvent(‘domready’, function() {
    var mySlideA = new Slider($(‘slider_minmax_gutter_m’), $(‘slider_minmax_minKnobA’),$(‘slider_bkg_img’), {
    start: 1920, end: 2020, offset: 10, knobheight: 20,
    onChange: function(pos){$(‘slider_minmax_min’).set(‘text’,’min ‘+pos.minpos);$(‘slider_minmax_max’).set(‘text’,’max ‘+pos.maxpos);}
    }, $(‘slider_minmax_maxKnobA’)).setMin(1981).setMax(2002);

    var mySlideB = new Slider($(‘slider_gutter_1’), $(‘slider_knob_1’), $(‘slider_bkg_img_1’),{
    start: 0,
    end: 120,
    offset: 10,
    onChange: function(pos){
    $(‘slider_current_val’).set(‘text’,pos + ‘ inches’);
    }
    }, null).setMin(100);
    $(‘slider_current_val’).set(‘text’,100 + ‘ inches’);
    });


  16. Mootools Slider With Range Indicator (two knobs) | WebGurus Design Blog Says:

    […] I finally changed my search keyword to “slider with two knobs” and I found “Mootools slider with two knobs” written by Nikhil D. Kunder who owns a blog by the name “Expressing IT “. This […]


  17. Nikhil Says:

    Brian,
    Sorry ! should have replied earlier. I m already working on the Frist Extra( the snap feature)… been involved with some bread and butter project :), so that gets priority.

    Will work on this as soon as , I get any little time …

    Also, Im still not clear about your second Extra! …


  18. Nikhil Says:

    Brian,

    I must say, this one (the slide step seems to be a though nut, though i have seen other sliders having this feature). I sat with this last evening and ended up pulling my hair over it the whole night. The logic seems easy enough and managed to include it quite easily. But visually, it seems to challenge and I seemed to fail badly yet.
    Well! I thought , I might help if I publish my WIP files, maybe you (and anyone else) can fix it … I sort of seem to lost … I will look at it again soon … but meanwhile, here is my working version ,

    Download Mootools Slider with Slide Steps slider

    oh! forgot to mention the issue…
    The Slider doesn’t seem to move till the end of the slider …. try moving it to its maximum value ….


  19. Expressing IT » Blog Archive » Understandng The CSS Clip Property Says:

    […] Most of CSS writers would agree that CSS Clip property is probably one of most un-used CSS properties. It was so true for me too and was most happy to neglect it , until I started modifying the MOOTOOLS TWO Knob (Pin) Slider Component(with Range Indicator). […]


  20. Mootools Double Pinned Slider with Range Indicator | Moojaxee Says:

    […] He has decided to create his own Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by […]


  21. AMB Album » Mootools Double Pinned Slider with Range Indicator Says:

    […] He has decided to create his own Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by […]


  22. Nikhil Says:

    Brian,

    Sorry! I should have mentioned .. that change for Slide Steps are included in the version 2.20 (unfortunately ,still in its WIP state, It has been very difficult to keep versions) … so you can verywell download the new (2.2) version instead of the WIP version I have provided above…

    Thanx
    Nik


  23. Mootools Two Knobs Slider With Range Indicator | Greepit.com | Open Source Resources for Designers & Developers Says:

    […] RSS feed for updates on this topic.Powered by WP Greet BoxA really handly and beautiful slider by Nikhil, while he was looking for a double pinned slider. Though , he did find a few well done double […]


  24. 70 New, Useful AJAX And JavaScript Techniques | Developer's Toolbox | Smashing Magazine 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. […]


  25. Wordpress Blog Services - 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. […]


  26. 70 New, Useful AJAX And JavaScript Techniques | How2Pc 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. […]


  27. 70 New, Useful AJAX And JavaScript Techniques | Feed Reader (Beta) 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. […]


  28. http://www.digiwu.com » Blog 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. […]


  29. Free Theme: Color Paper Wordpress Theme now on Smashing Magazine | Feed Reader (Beta) 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. […]


  30. 70 New, Useful AJAX And JavaScript Techniques | ClickLogin Web Design 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. […]


  31. IT Technology And Something » 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. […]


  32. » 15 Must See MooTools Techniques WebAir Blog Says:

    […] MooTools Slider with two knobs […]


  33. Nunzio Fiore Says:

    Hi man,
    great site and great work… I think i ll use it for a personalization of my moogenda (http://www.moonkiki.com/moongenda/moogenda.html)..
    I ll add it in a form where do you set the time ellapsed in a meeting… but first i have a question
    it s possible to set the object to have decimal number
    something like
    8
    8.5
    9
    9.5
    10
    10.5
    and so on?

    thx
    Nunzio


  34. Nikhil Says:

    Hey Nunzio,

    The slider component itself cannot process decimal slide steps… but for your requirement, all you need is to display decimal values( and process it as required later) … so what you can do is as follows …

    var mySlideC = new Slider($(‘slider_gutter_C’), $(‘slider_knob_C’), $(‘slider_bkg_img_C’),{
    start: 1,
    end: 100,
    offset:0,
    snap:true,
    numsteps:100,
    onChange: function(pos){
    $(‘slider_current_val_2’).setHTML(pos/2 + ‘ inches’);

    }
    }, null).setMin(5);

    NOTE : if you wanted to show the slider for a range of 1-50 with half values like (1.5, 2, 2.5, 3 and so on) you can set the range for 1-100 , set numsteps to 100 and display it in fraction as $(‘slider_current_val_2’).setHTML(pos/2 + ‘ inches’);

    HOPE this helps!


  35. nunzio fiore Says:

    Hi Nik,
    you re great.. this evening I’ll try and I’ll show you what I’ll do 🙂
    Thank you again
    Nunzio


  36. nunzio fiore Says:

    http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider-with-range-indicator/comment-page-1/#comment-929


  37. nunzio fiore Says:

    previous post it was a cut and paste mistake 🙂
    this is right

    http://moonkiki.blogspot.com/2009/03/knob-in-moogenda.html


  38. Nikhil Says:

    Hey Nunzio,

    Thats an honour!Thanks Tons!

    best wishes,N


  39. MoonKiKi Says:

    Hi,
    i wish i did something pleasure for all of yours reader with this post

    http://moonkiki.blogspot.com/2009/04/gift-knob-zone-for-knob-on.html


  40. Nikhil Says:

    MoonKiki,

    That is useful. Atleast there will be a real life example of people to look at. I have used this Mootools Range Slider in two of my project works … sadly they are still under UAT!

    Thanks again
    N


  41. moonkiki Says:

    you’re right, just a week or two for the video 😉


  42. AMB Album » 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. […]


  43. Dapepan Says:

    Hello,

    I have some doubts using the double pinned slider. I want to send the information I have selected in the slider in order to send to a jsp page and I don’t know how to do it. I’d like have a fuction to get the min and max values out of the javascript, could you help me?

    Thanks!


  44. AD Says:

    Hi Nikhil,

    Thanks for this great slider. I am using the first slider of the three and can’t seem to figure out how to implement that it goes up in steps like the third. Can you please tell me what I need to edit to increment the sliding by 10.

    Thank you


  45. nurettin Says:

    i like your script.
    thank you 😉


  46. Xurk Says:

    Hi Nikhil,

    First off: great implementation of the MooTools Slider class! This is easily the best version of it out there. I also think it’s the only one that offers the possiblity of two knobs instead of just one and even stops them from passing each other!

    I do have a problem though; even though none of the examples display it, I saw in the JS file that the ‘vertical’ mode from the original Slider class is still in there and I need a vertical slider with two knobs… so I set the option ‘mode’ to ‘vertical’. Some CSS adjustments had to be made, but that wasn’t too daunting a task. The problem is, that the knobs won’t behave properly anymore – one of them ‘jumps’ to position -2 whenever I attempt to drag it elsewhere, the other one slides okay, but won’t pass a certain position on the slider.

    As I’m not sure what exactly is going wrong, I thought maybe you just hadn’t included your extension of the class to function for a vertical slider? I’ve tried modifying the class here and there, but to no avail. Or if you did do this, is it possible that you could include an example of how to make the vertical double-knob slider function properly? I would greatly appreciate it!

    So if you’d be willing to look into this, thank you in advance for your efforts!

    Cheers,
    Xurk


  47. Grzegorz Says:

    I have two input fields with holds slider values, user can change values in input and i want to update knobs position. I wrote function for this.

    This is my proposal:

    moveToStep: function(step, max){
    if((step >= this.options.start)&&(step this.step){
    this.maxstep = step;
    this.maxknob.setStyle(“left”,parseInt(this.toPosition(step)));
    }
    }else{
    //MIN
    if(step < this.maxstep){
    this.step = step;
    this.knob.setStyle(“left”,parseInt(this.toPosition(step)));
    }
    }
    this.checkStep(1);
    this.end();
    }
    },

    I have writen it a minute ago so it may have bugs


  48. Hello world! « Trungquy’s Blog 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. […]


  49. symos Says:

    Hi there

    Fantastic work! Really helpful stuff!

    Just wanted to mention a couple of problems and solutions:

    1. “Snap” only works for the min slider, not the max one. Adding:

    if(maxknob != null) {

    this.maxdrag.options.grid = (this.full)/this.options.numsteps;
    this.maxdrag.options.limit[this.z][1] = this.full;
    }

    inside the ” if (this.options.snap) ” seems to solve this.
    However, then there are more problems:

    2. The max slider does move in steps, but in some cases it stops one step before the end, having to do with how the mx limit for maxdrag is calculated within the checkStep function.

    Now, this is not a very sophisticated solution and might not work in all cases, but I found that changing:

    mx= this.max – this.options.offset;

    to

    mx= this.max – this.options.offset + 0.1;

    makes the problem go away in all different min/max and step combinations I tried.

    Maybe if you don’t need the boundaries to change dynamically like in my case you won’t have this problem, but if you do, this might do it for you.

    Now I can go on and make my asos.com like double slider price filter!

    Thanks Nikhil!


  50. 70 New, Useful AJAX And JavaScript Techniques « Ramesh 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. […]


Leave a Reply

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