YUI recommends YUI 3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
This example demonstrates a vertical implementation of the YUI Slider Control. Some characteristics of this implementation include the following:
Pixel offset from start: 0
Calculated Value: 0
You supply your own markup for the slider. Keep in mind the following points about markup for YUI Slider Control implementations:
<img>
element rather than a CSS background for the thumb to get around
a performance bottleneck when animating the thumb's position in IE.relative
or absolute
.CSS:
1 | #slide_bg { |
2 | position: relative; |
3 | background: url(assets/bg-v.gif) 12px 0 no-repeat; |
4 | height: 228px; |
5 | width: 48px; |
6 | } |
7 | |
8 | #slide_thumb { |
9 | cursor: default; |
10 | position: absolute; |
11 | top: 200px; /* To initialize the slide thumb at the bottom */ |
12 | } |
view plain | print | ? |
Markup:
1 | <div id="demo"> |
2 | |
3 | <div id="slide_bg" tabindex="-1"> |
4 | <div id="slide_thumb"><img src="assets/thumb-bar.gif"></div> |
5 | </div> |
6 | |
7 | <p>Pixel offset from start: <span id="d_offset"></span></p> |
8 | <p>Calculated Value: <span id="d_val"></span></p> |
9 | </div> |
view plain | print | ? |
getValue
offsetOffset values returned by the getValue()
methods, or passed as a parameter to the change
event callback, increase as the slider moves left-to-right and top-to-bottom. Making the value increase in the opposite direction is as simple as multiplying by -1.
Look for the magic in this code:
1 | YAHOO.util.Event.onDOMReady(function () { |
2 | |
3 | // the slider can move up 200 pixels |
4 | var upLimit = 200; |
5 | |
6 | // and down 0 pixels |
7 | var downLimit = 0; |
8 | |
9 | // Create the Slider instance |
10 | var slider = YAHOO.widget.Slider.getVertSlider( |
11 | 'slide_bg', 'slide_thumb', upLimit, downLimit); |
12 | |
13 | // Add a little functionality to the instance |
14 | YAHOO.lang.augmentObject(slider, { |
15 | |
16 | // A custom value range for the slider |
17 | minValue : 10, |
18 | maxValue : 110, |
19 | |
20 | // A method to retrieve the calculated value, per the value range |
21 | getCalculatedValue : function () { |
22 | |
23 | // HERE'S THE MAGIC |
24 | // invert the offset value so "real" values increase as the |
25 | // slider moves up |
26 | var offset = -1 * this.getValue(); |
27 | |
28 | // Convert the offset to a value in our configured range |
29 | var conversionFactor = |
30 | (this.maxValue - this.minValue) / |
31 | (this.thumb.topConstraint + this.thumb.bottomConstraint); |
32 | |
33 | return Math.round(offset * conversionFactor) + this.minValue; |
34 | } |
35 | }); |
36 | |
37 | |
38 | // display the native offset and the calculated while sliding |
39 | var offset_span = YAHOO.util.Dom.get('d_offset'); |
40 | var calc_span = YAHOO.util.Dom.get('d_val'); |
41 | |
42 | slider.subscribe('change', function (offsetFromStart) { |
43 | offset_span.innerHTML = offsetFromStart; |
44 | calc_span.innerHTML = this.getCalculatedValue(); |
45 | }); |
46 | }); |
view plain | print | ? |
For horizontal Sliders, multiplying the offset by -1 makes values increase right-to-left.
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
INFO 66ms (+34) 3:16:47 PM:
LogReader instance0
LogReader initialized
INFO 32ms (+1) 3:16:47 PM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 31ms (+0) 3:16:47 PM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 31ms (+31) 3:16:47 PM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 3:16:47 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings