YUI Library Examples: Slider Control: Bottom to top Vertical Slider

Building a Bottom-Up Vertical Slider

You supply your own markup for the slider. Keep in mind the following points about markup for YUI Slider Control implementations:

The thumb element should be a child of the slider background
The tabindex attribute lets this element receive focus in most browsers.
If the slider background can receive focus, the arrow keys can be used to change this slider's value.
We use an <img> element rather than a CSS background for the thumb to get around a performance bottleneck when animating the thumb's position in IE.
Both elements should have an explicit CSS position: relative or absolute.
Don't apply a CSS border to the slider background

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 \| ?

Invert the `getValue` offset

Offset 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 \| ?

YAHOO.util.Event.onDOMReady(function () {

// the slider can move up 200 pixels
    var upLimit   = 200;

// and down 0 pixels
    var downLimit = 0;

// Create the Slider instance
    var slider = YAHOO.widget.Slider.getVertSlider(
                'slide_bg', 'slide_thumb', upLimit, downLimit);

// Add a little functionality to the instance
    YAHOO.lang.augmentObject(slider, {

// A custom value range for the slider
        minValue : 10,
        maxValue : 110,

// A method to retrieve the calculated value, per the value range
        getCalculatedValue : function () {

// HERE'S THE MAGIC
            // invert the offset value so "real" values increase as the
            // slider moves up
            var offset = -1 * this.getValue();

// Convert the offset to a value in our configured range
            var conversionFactor =
                    (this.maxValue - this.minValue) /
                    (this.thumb.topConstraint + this.thumb.bottomConstraint);

return Math.round(offset * conversionFactor) + this.minValue;
        }
    });

// display the native offset and the calculated while sliding
    var offset_span = YAHOO.util.Dom.get('d_offset');
    var calc_span   = YAHOO.util.Dom.get('d_val');

slider.subscribe('change', function (offsetFromStart) {
        offset_span.innerHTML = offsetFromStart;
        calc_span.innerHTML   = this.getCalculatedValue();
    });
});

For horizontal Sliders, multiplying the offset by -1 makes values increase right-to-left.

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: Slider Control: Bottom to top Vertical Slider

Building a Bottom-Up Vertical Slider

Invert the `getValue` offset

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources:

YUI Library Examples: Slider Control: Bottom to top Vertical Slider

Slider Control: Bottom to top Vertical Slider

Building a Bottom-Up Vertical Slider

Invert the getValue offset

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources:

Invert the `getValue` offset