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.
We use the Sam skin for a 200px horizontal slider and use the thumb-n.gif thumb image from the build assets
The background element is assigned a new image from the build assets.
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.
Don't apply a CSS border to the slider background

CSS:


1	#slider-bg {
2	background:url(http://yui.yahooapis.com/2.9.0/build/slider/assets/bg-fader.gif) 5px 0 no-repeat;
3	}
4	#slider-thumb {
5	left: 0;
6	}
	view plain \| print \| ?

Markup:


1	<div id="slider-bg" class="yui-h-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-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	// Sliders with ticks can be animated without YAHOO.util.Anim
31	slider.animate = true;
32
33	slider.getRealValue = function() {
34	return Math.round(this.getValue() * scaleFactor);
35	}
36
37	slider.subscribe("change", function(offsetFromStart) {
38
39	var valnode = Dom.get(valuearea);
40	var fld = Dom.get(textfield);
41
42	// Display the pixel value of the control
43	valnode.innerHTML = offsetFromStart;
44
45	// use the scale factor to convert the pixel offset into a real
46	// value
47	var actualValue = slider.getRealValue();
48
49	// update the text box with the actual value
50	fld.value = actualValue;
51
52	// Update the title attribute on the background. This helps assistive
53	// technology to communicate the state change
54	Dom.get(bg).title = "slider value = " + actualValue;
55
56	});
57
58	slider.subscribe("slideStart", function() {
59	YAHOO.log("slideStart fired", "warn");
60	});
61
62	slider.subscribe("slideEnd", function() {
63	YAHOO.log("slideEnd fired", "warn");
64	});
65
66	// Listen for keystrokes on the form field that displays the
67	// control's value. While not provided by default, having a
68	// form field with the slider is a good way to help keep your
69	// application accessible.
70	Event.on(textfield, "keydown", function(e) {
71
72	// set the value when the 'return' key is detected
73	if (Event.getCharCode(e) === 13) {
74	var v = parseFloat(this.value, 10);
75	v = (lang.isNumber(v)) ? v : 0;
76
77	// convert the real value into a pixel offset
78	slider.setValue(Math.round(v/scaleFactor));
79	}
80	});
81
82	// Use setValue to reset the value to white:
83	Event.on("putval", "click", function(e) {
84	slider.setValue(100, false); //false here means to animate if possible
85	});
86
87	// Use the "get" method to get the current offset from the slider's start
88	// position in pixels. By applying the scale factor, we can translate this
89	// into a "real value
90	Event.on("getval", "click", function(e) {
91	YAHOO.log("Current value: " + slider.getValue() + "\n" +
92	"Converted value: " + slider.getRealValue(), "info", "example");
93	});
94	});
95	})();
96	</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);

// Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

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>

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: Horizontal Slider with Tick Marks

Building a Horizontal Slider

Configuration for This Example

YUI Logger Output:

Logger Console

Slider Control Examples:

More Slider Control Resources: