YUI Library: Slider with Dual Thumbs 2008-2-19 v2.

5
Simple Use Case Interesting Moments in DualSlider see docs for full list YAHOO.widget.Slider:
Factory Methods
Markup: Event Fires... Arguments
slideStart getHorizDualSlider()
<div id="sliderbg"> ...at the beginning of a Slider instance
<div id="minthumb"><img src="thumbimg"></div> getVertDualSlider()
user-initiated change in
<div id="maxthumb"><img src="thumbimg"></div> either thumb position. Slider instance housing the Each method returns a DualSlider object.
active thumb See Constructor section for args list.
</div>
slideEnd ... at the end of a user- Slider instance
Script: YAHOO.widget.DualSlider:
var slider =
initiated change in either
thumb position. Slider instance housing the Properties
YAHOO.widget.Slider.getHorizDualSlider( active thumb
“sliderbg","minthumb",“maxthumb”, 200); change ...each time either of the DualSlider minVal (n) (read only)
thumbs’ positions instance maxVal (n) (read only)
Creates two thumbs (minthumb and maxthumb) that can move within
change during a user- isHoriz (b) (read only)
a horizontal 200 pixel range on a slide background (slidebg).
minSlider (Slider) (read only)
initiated move.
maxSlider (Slider) (read only)
Constructor: YAHOO.widget.DualSlider DualSlider events are Custom Events; subscribe to them by name using the
following syntax: mySlider.subscribe("change", fn);.
minRange (n) (read / write)
YAHOO.widget.Slider.getHorizDualSlider(str bgid, minimum number of pixels the inner
str minthumbid, str maxthumbid, int range[, int DualSlider Design Considerations edges of the thumbs can be apart
tick[,array initVals]]]);
DualSlider is an implementation of a YAHOO.widget.DualSlider:
Arguments for Horizontal and Vertical DualSliders: "finite range control." The range
(1) Background element ID: HTML ID for the slider’s background. Methods
defined by the DualSlider thumbs is
(2) Min Thumb element ID: HTML ID for the thumb element expressed in pixels. setMinValue(int)
representing the lower value. setMaxValue(int)
(3) Max Thumb element ID: HTML ID for the thumb element The maximum range of a slider is setValues(int newMinOffset,
representing the upper value. the pixel-width of the DualSlider's int newMaxOffset,
(4) Range: The maximum pixel offset for the Max Thumb. background minus half the width b skipAnimation)
(5) Tick interval: Number of pixels between each tick mark. of the Min Thumb minus half the
(7) Initial Values: Array containing the desired Min Thumb and Max width of the Max Thumb. YAHOO.widget.DualSlider:
Thumb pixel offsets to assign during instantiation.
Values for each thumb are
Dependencies
calculated according to their center
Solutions point. To quantify the space
DualSlider requires the YAHOO
object, Dom, Event, Drag &
Create a vertical DualSlider with a 300 pixel range, ticks at 10 px between the thumbs, use this Drop, and (optionally)
intervals, and initial values of 160 and 220: formula: Animation.

var slider = innerDiff = maxVal - minVal - CSS Notes:

YAHOO.widget.Slider.getVertDualSlider("sliderbg" (minThumbWidth/2) -
, "minthumb", “maxthumb”, 300, 10, [160,220] ); • DualSlider background should
(minThumbWidth/2)
be position:relative;
Assuming an instance of a DualSlider in variable mySlider, write a • Slider thumbs should be
handler for its change event: position:absolute;
• Slider thumb image should
mySlider.subscribe("change", function() { not be a background image
alert(“MIN: “+this.minVal+” MAX: “+this.maxVal);
});