YUI Library: Slider 2008-2-19 v2.

5
Simple Use Case Interesting Moments in Slider see online docs for complete list YAHOO.widget.Slider:
Factory Methods
Markup: Event Fires... Arguments
slideStart getHorizSlider()
<div id="sliderbg"> ...at the beginning of a none
<div id="sliderthumb"><img src="thumbimg"></div> getVertSlider()
user-initiated change in getSliderRegion()
</div> the thumb position.
Each method returns a Slider object.
Script: slideEnd ... at the end of a user- none See Constructor section for args list.
var slider = initiated change in the
YAHOO.widget.Slider.getHorizSlider("sliderbg", thumb position. YAHOO.widget.Slider:
"sliderthumb", 0, 200);
change ...each time the thumb int or {x: int, y:int} Properties
Creates a horizontal Slider within the sliderthumb div that can move position changes during a offset from the starting position,
one offset per slider dimension animate (b)
0 pixels left and 200 pixels to the right. user-initiated move. animationDuration (n)
Slider events are Custom Events; subscribe to them by name using the following default 0.2, roughly in seconds
Constructor: YAHOO.widget.Slider syntax: mySlider.subscribe("change", fn);. keyIncrement (n) number
of pixels to move slider on arrow
keypress
YAHOO.widget.Slider.getHorizSlider(str bgid, str Slider Design Considerations
thumbid, int lft/up, int rt/dwn[, int tick]);
YAHOO.widget.Slider:
Arguments for Horizontal and Vertical Sliders: Methods
(1) Background element ID: HTML ID for the slider’s background.
(2) Thumb element ID: HTML ID for the thumb element. getValue()
(3) Left/Up: The number of pixels the thumb can move left or up. getXValue()
(4) Right/Down: The number of pixels the thumb can move right or getYValue()
down. lock()
(5) Tick interval: Number of pixels between each tick mark. setRegionValue(int
newXOffset, int
Region Sliders take four args for range: left, right, up, down. newYOffset, b
A Slider is an implementation of a "finite range control." The range defined skipAnimation)
Solutions by the Slider is incremented in pixels. The maximum range of a slider is setValue(int newOffset,
the pixel-width of the Slider's background minus the width of the b skipAnimation)
Create a vertical Slider with a range of 300 pixels, ticks at 10 px Slider Thumb.
unlock()
intervals, and an initial value of 160:
var slider = Region Sliders: YAHOO.widget.
YAHOO.widget.Slider.getVertSlider("sliderbg",
A two-dimensional Slider is referred to SliderThumb:
"sliderthumb", 0, 300, 10);
as a Region Slider. Region Sliders SliderThumb inherits from
slider.setValue(160, true); //set to 160, skip anim
report two values onChange (x offset, y YAHOO.util.DD, part of the
Create a 300x400 pixel region Slider and set the initial thumb position offset) and have their own method for Drag & Drop library.
to 263 on the x-axis and 314 on the y-axis: setting value in JavaScript:
setRegionValue takes x offset and y CSS Notes:
var slider =
offset as arguments, followed by the
YAHOO.widget.Slider.getSliderRegion("sliderbg",
boolean flag for skipping animation. • Slider background
"sliderthumb", 0, 300, 0, 400);
Design considerations regarding range should be
slider.setRegionValue(263, 314, true);
and thumb width apply in both vertical position:relative;
Assuming an instance of a horizontal Slider in variable mySlider, and horizontal dimensions. • Slider thumb should be
write a handler for its onSlideEnd event: position:absolute;
• Slider thumb image
mySlider.subscribe("slideEnd", function() { Dependencies should not be a
alert(this.getValue()); //alerts offset from start background image
}); Slider requires the YAHOO object, Event, Drag & Drop, Dom, and
(optionally) Animation.