Min:0,   Max:100     
Move Show
Jan
Dec
•Here is a dual thumbed slider I implemented using the YUI toolkit. I love the YUI, and Yahoo! has done a great job… I am looking forward to more goodness from the super YUI team.

•Update: 10/11/2007 -

•Update: 10/1/2007 - •I needed a dual thumb slider for a site I am developing, and while Yahoo! has mentioned this in the road map, I simply could not wait any longer, and so I put this together. I hope others can take advantage of my effort, and I encourage you to take this and improve it. Please send me feedback and improvements, and I will coordinate them all.

•There is some documentation in the implementation file slider.js, and quite a few examples right here on this page slider_test.html.

•To see debugging/loging information, courtesy of Firebug, press F12.

•Thanks to the YUI Team! Stergios Marinopoulos (stergios_marinopoulos at yahoo com) 

  // Configuration object literal:
 
  var cfg = {
    containerDiv:      'sliderContainerDiv',   //  Surrounding container.  Both Thumbs must be inside.
    leftHandleDiv:     'leftHandleDiv',        //  Left thumb.  Set it's back ground to the image you want.
    rightHandleDiv:    'rightHandleDiv',       //  Right thumb.  Set it's back ground to the image you want.
    groupName:         'smSlider',             //  A unique name.
    minValue:          0,                      //  The minimum value for the slider range.
    maxValue:          100,                    //  The maximum value for the slider range.
    callBack:          callBack,               //  The call back function for when new values are set.  Values are on the range [minValue, maxValue]
    stepCount:         10,                     //  (Optional) The minimum increment required for a thumb move. 
    allowEqual:        true,                   //  (default==true) Are the 2 handles allowed to have the same value?
                                               //  Useful for when the two hanles cannot have the same value.  Thanks to 
                                               //  William Paoli for the idea!
    leftMoveCallBack:  mouseMoveCallBackLeft,  //  (Optional) The call back function for left mouse move events.
                                               //    Values are on the range [minValue, maxValue]
    rightMoveCallBack: mouseMoveCallBackRight  //  (Optional) The call back function for right mouse move events.
                                               //    Values are on the range [minValue, maxValue]
  };


  // Create and initiate a new slider:

  var slider = createSlider(cfg) ;
  slider.init() ;