YUI Library Examples: Slider Control: Basic Vertical Slider

Building a 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.
We use the Sam skin for a 200px vertical slider and use the thumb-bar.gif thumb image from the build assets
If the slider background can receive focus, the arrow keys can be used to change this slider's value.
Don't apply a CSS border to the slider background

Markup:


1	<div id="slider-bg" class="yui-v-slider" tabindex="-1" title="Slider">
2	<div id="slider-thumb" class="yui-slider-thumb"><img src="http://yui.yahooapis.com/2.9.0/build/slider/assets/thumb-bar.gif"></div>
3	</div>
4	<p>Pixel value: <span id="slider-value">0</span></p>
5
6	<p>Converted value:
7	<input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
8	</p>
9
10	<!--We'll use these to trigger interactions with the Slider API -->
11	<button id="putval">Change slider value to 100 (converted value 150)</button>
12	<button id="getval">Write current value to the Logger</button>
	view plain \| print \| ?

Code:


1	<script type="text/javascript">
2	(function() {
3	var Event = YAHOO.util.Event,
4	Dom = YAHOO.util.Dom,
5	lang = YAHOO.lang,
6	slider,
7	bg="slider-bg", thumb="slider-thumb",
8	valuearea="slider-value", textfield="slider-converted-value"
9
10	// The slider can move 0 pixels up
11	var topConstraint = 0;
12
13	// The slider can move 200 pixels down
14	var bottomConstraint = 200;
15
16	// Custom scale factor for converting the pixel offset into a real value
17	var scaleFactor = 1.5;
18
19	// The amount the slider moves when the value is changed with the arrow
20	// keys
21	var keyIncrement = 20;
22
23	Event.onDOMReady(function() {
24
25	slider = YAHOO.widget.Slider.getVertSlider(bg,
26	thumb, topConstraint, bottomConstraint);
27
28	slider.getRealValue = function() {
29	return Math.round(this.getValue() * scaleFactor);
30	}
31
32	slider.subscribe("change", function(offsetFromStart) {
33
34	var valnode = Dom.get(valuearea);
35	var fld = Dom.get(textfield);
36
37	// Display the pixel value of the control
38	valnode.innerHTML = offsetFromStart;
39
40	// use the scale factor to convert the pixel offset into a real
41	// value
42	var actualValue = slider.getRealValue();
43
44	// update the text box with the actual value
45	fld.value = actualValue;
46
47	// Update the title attribute on the background. This helps assistive
48	// technology to communicate the state change
49	Dom.get(bg).title = "slider value = " + actualValue;
50
51	});
52
53	slider.subscribe("slideStart", function() {
54	YAHOO.log("slideStart fired", "warn");
55	});
56
57	slider.subscribe("slideEnd", function() {
58	YAHOO.log("slideEnd fired", "warn");
59	});
60
61	// set an initial value
62	slider.setValue(20);
63
64	// Listen for keystrokes on the form field that displays the
65	// control's value. While not provided by default, having a
66	// form field with the slider is a good way to help keep your
67	// application accessible.
68	Event.on(textfield, "keydown", function(e) {
69
70	// set the value when the 'return' key is detected
71	if (Event.getCharCode(e) === 13) {
72	var v = parseFloat(this.value, 10);
73	v = (lang.isNumber(v)) ? v : 0;
74
75	// convert the real value into a pixel offset
76	slider.setValue(Math.round(v/scaleFactor));
77	}
78	});
79
80	// Use setValue to reset the value to white:
81	Event.on("putval", "click", function(e) {
82	slider.setValue(100, false); //false here means to animate if possible
83	});
84
85	// Use the "get" method to get the current offset from the slider's start
86	// position in pixels. By applying the scale factor, we can translate this
87	// into a "real value
88	Event.on("getval", "click", function(e) {
89	YAHOO.log("Current value: " + slider.getValue() + "\n" +
90	"Converted value: " + slider.getRealValue(), "info", "example");
91	});
92	});
93	})();
94	</script>
	view plain \| print \| ?

// The slider can move 0 pixels up
    var topConstraint = 0;

// The slider can move 200 pixels down
    var bottomConstraint = 200;

// Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

// The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

Event.onDOMReady(function() {

slider = YAHOO.widget.Slider.getVertSlider(bg, 
                         thumb, topConstraint, bottomConstraint);

slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

slider.subscribe("change", function(offsetFromStart) {

var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

// Display the pixel value of the control
            valnode.innerHTML = offsetFromStart;

// use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

// update the text box with the actual value
            fld.value = actualValue;

// Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

});

slider.subscribe("slideStart", function() {
                YAHOO.log("slideStart fired", "warn");
            });

slider.subscribe("slideEnd", function() {
                YAHOO.log("slideEnd fired", "warn");
            });

// set an initial value
        slider.setValue(20);

// Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
        Event.on(textfield, "keydown", function(e) {

// set the value when the 'return' key is detected
            if (Event.getCharCode(e) === 13) {
                var v = parseFloat(this.value, 10);
                v = (lang.isNumber(v)) ? v : 0;

// convert the real value into a pixel offset
                slider.setValue(Math.round(v/scaleFactor));
            }
        });
        
        // Use setValue to reset the value to white:
        Event.on("putval", "click", function(e) {
            slider.setValue(100, false); //false here means to animate if possible
        });
        
        // Use the "get" method to get the current offset from the slider's start
        // position in pixels.  By applying the scale factor, we can translate this
        // into a "real value
        Event.on("getval", "click", function(e) {
            YAHOO.log("Current value: "   + slider.getValue() + "\n" + 
                      "Converted value: " + slider.getRealValue(), "info", "example"); 
        });
    });
})();
</script>

Configuration for This Example

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.

YUI Library Examples: Slider Control: Basic Vertical Slider

Building a Vertical Slider

Configuration for This Example

YUI Logger Output:

Logger Console

Slider Control Examples:

More Slider Control Resources: