YUI Library Home

Site Search (YDN & YUIBlog):

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

# Slider Control: Horizontal Slider with Tick Marks

This example uses the YUI Slider Control to implement a basic horizontal slider with tick marks & that is, with predefined intervals at which the slider thumb will stop as it's dragged. (By default, a slider thumb can be dragged one pixel at a time.)

Here are some important characteristics of this implementation:

- The slider range is 200 pixels.
- The slider movement is restricted to 20 pixel increments.
- 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.
- Once the slider has focus, the left and right 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 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:

#slider-bg { background:url(http://yui.yahooapis.com/2.8.0r4/build/slider/assets/bg-fader.gif) 5px 0 no-repeat; }

Markup:

<div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider"> <div id="slider-thumb" class="yui-slider-thumb"><img src="http://yui.yahooapis.com/2.8.0r4/build/slider/assets/thumb-n.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; 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 Logger Output:

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

Reload with logging
and debugging enabled.

### 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
- Basic Features (included with examples for ProgressBar Control)
- Events (included with examples for ProgressBar Control)
- Slider Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager)

### More Slider Control Resources:

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

Copyright © 2009 Yahoo! Inc. All rights reserved.

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