YUI Library Examples: Slider Control: Horizontal Slider with Tick Marks

Building a Horizontal 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	<style type="text/css">
2
3	#slider-bg {
4	position: relative;
5	background:url(assets/bg-fader.gif) 5px 0 no-repeat;
6	height:28px;
7	width:228px;
8	}
9
10	#slider-thumb {
11	position: absolute;
12	top: 4px;
13	}
14	</style>
	view plain \| print \| ?

Markup:


1	<div id="slider-bg" tabindex="-1" title="Slider">
2	<div id="slider-thumb"><img src="assets/thumb-n.gif"></div>
3	</div>
4
5	<p>Pixel value: <span id="slider-value">0</span></p>
6
7	<p>Converted value:
8	<input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
9	</p>
10
11	<!--We'll use these to trigger interactions with the Slider API -->
12	<button id="putval">Change slider value to 100 (converted value 150)</button>
13	<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	var tickSize = 20;
24
25	Event.onDOMReady(function() {
26
27	slider = YAHOO.widget.Slider.getHorizSlider(bg,
28	thumb, topConstraint, bottomConstraint, 20);
29
30	slider.getRealValue = function() {
31	return Math.round(this.getValue() * scaleFactor);
32	}
33
34	slider.subscribe("change", function(offsetFromStart) {
35
36	var valnode = Dom.get(valuearea);
37	var fld = Dom.get(textfield);
38
39	// Display the pixel value of the control
40	valnode.innerHTML = offsetFromStart;
41
42	// use the scale factor to convert the pixel offset into a real
43	// value
44	var actualValue = slider.getRealValue();
45
46	// update the text box with the actual value
47	fld.value = actualValue;
48
49	// Update the title attribute on the background. This helps assistive
50	// technology to communicate the state change
51	Dom.get(bg).title = "slider value = " + actualValue;
52
53	});
54
55	slider.subscribe("slideStart", function() {
56	YAHOO.log("slideStart fired", "warn");
57	});
58
59	slider.subscribe("slideEnd", function() {
60	YAHOO.log("slideEnd fired", "warn");
61	});
62
63	// Listen for keystrokes on the form field that displays the
64	// control's value. While not provided by default, having a
65	// form field with the slider is a good way to help keep your
66	// application accessible.
67	Event.on(textfield, "keydown", function(e) {
68
69	// set the value when the 'return' key is detected
70	if (Event.getCharCode(e) === 13) {
71	var v = parseFloat(this.value, 10);
72	v = (lang.isNumber(v)) ? v : 0;
73
74	// convert the real value into a pixel offset
75	slider.setValue(Math.round(v/scaleFactor));
76	}
77	});
78
79	// Use setValue to reset the value to white:
80	Event.on("putval", "click", function(e) {
81	slider.setValue(100, false); //false here means to animate if possible
82	});
83
84	// Use the "get" method to get the current offset from the slider's start
85	// position in pixels. By applying the scale factor, we can translate this
86	// into a "real value
87	Event.on("getval", "click", function(e) {
88	YAHOO.log("Current value: " + slider.getValue() + "\n" +
89	"Converted value: " + slider.getRealValue(), "info", "example");
90	});
91	});
92	})();
93	</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;

var tickSize = 20;

Event.onDOMReady(function() {

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

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");
            });

// 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>

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: Slider Control: Horizontal Slider with Tick Marks

Building a Horizontal Slider

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources: