Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Slider Control: Basic Vertical Slider

# Slider Control: Basic Vertical Slider

This example demonstrates a simple vertical implementation of the YUI Slider Control. Some characteristics of this implementation include the following:

- The slider range is 200 pixels.
- Custom logic is applied to convert the current pixel value (from 0 to 200) to a "real" value. In this case the "real" range is 0 to 300.
- The value is set to 30 after the control is initialized
- Once the slider has focus, the up and down keys will move the thumb 20 pixels (changing the "real" value by 30).
- When the slider value changes, the UI is updated. The title attribute of the slider background is updated with the current value, and the text field is updated with the current "real" value. These techniques can help inform assistive technologies (like screen reader software) about the slider's current state.

View example in new window.

Pixel value: 0

Converted value:

## 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.
- 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:

<style type="text/css"> #slider-bg { position: relative; background:url(assets/bg-v.gif) 12px 0 no-repeat; height:228px; width:48px; } #slider-thumb { position: absolute; } </style>

Markup:

<div id="slider-bg" tabindex="-1" title="Slider"> <div id="slider-thumb"><img src="assets/thumb-bar.gif"></div> </div> <p>Pixel value: <span id="slider-value">0</span></p> <p>Converted value: <input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" /> </p> <!--We'll use these to trigger interactions with the Slider API --> <button id="putval">Change slider value to 100 (converted value 150)</button> <button id="getval">Write current value to the Logger</button>

Code:

<script type="text/javascript"> (function() { var Event = YAHOO.util.Event, Dom = YAHOO.util.Dom, lang = YAHOO.lang, slider, bg="slider-bg", thumb="slider-thumb", valuearea="slider-value", textfield="slider-converted-value" // 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>

### 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.

### Slider Control Examples:

- Basic Vertical Slider
- Horizontal Slider with Tick Marks
- RBG Slider Control
- Bottom to top Vertical Slider
- Horizontal Slider with two thumbs
- Dual-thumb Slider with range highlight
- Slider Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager (beta))

### More Slider Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings