YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Slider Control: Bottom to top Vertical Slider

# Slider Control: Bottom to top Vertical Slider

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

- The slider range is 200 pixels.
- CSS is used to place the slide thumb at the bottom of the slider.
- Custom logic is added to the slider instance to convert the offset value to a "real" value calculated from a provided min/max range.
- The custom min value is set to 10; the max 110.
- Once the slider has focus, the up and down keys will move the thumb 20 pixels (changing the "real" value by 10).
- When the slider value changes, the pixel offset and calculated value are reported below the slider.

View example in new window.

Pixel offset from start: 0

Calculated Value: 0

## Building a Bottom-Up 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:

#slide_bg { position: relative; background: url(assets/bg-v.gif) 12px 0 no-repeat; height: 228px; width: 48px; } #slide_thumb { cursor: default; position: absolute; top: 200px; /* To initialize the slide thumb at the bottom */ }

Markup:

<div id="demo"> <div id="slide_bg" tabindex="-1"> <div id="slide_thumb"><img src="assets/thumb-bar.gif"></div> </div> <p>Pixel offset from start: <span id="d_offset"></span></p> <p>Calculated Value: <span id="d_val"></span></p> </div>

## Invert the `getValue` offset

Offset values returned by the `getValue()` methods, or passed as a parameter to the `change` event callback, increase as the slider moves left-to-right and top-to-bottom. Making the value increase in the opposite direction is as simple as multiplying by -1.

Look for the magic in this code:

YAHOO.util.Event.onDOMReady(function () { // the slider can move up 200 pixels var upLimit = 200; // and down 0 pixels var downLimit = 0; // Create the Slider instance var slider = YAHOO.widget.Slider.getVertSlider( 'slide_bg', 'slide_thumb', upLimit, downLimit); // Add a little functionality to the instance YAHOO.lang.augmentObject(slider, { // A custom value range for the slider minValue : 10, maxValue : 110, // A method to retrieve the calculated value, per the value range getCalculatedValue : function () { // HERE'S THE MAGIC // invert the offset value so "real" values increase as the // slider moves up var offset = -1 * this.getValue(); // Convert the offset to a value in our configured range var conversionFactor = (this.maxValue - this.minValue) / (this.thumb.topConstraint + this.thumb.bottomConstraint); return Math.round(offset * conversionFactor) + this.minValue; } }); // display the native offset and the calculated while sliding var offset_span = YAHOO.util.Dom.get('d_offset'); var calc_span = YAHOO.util.Dom.get('d_val'); slider.subscribe('change', function (offsetFromStart) { offset_span.innerHTML = offsetFromStart; calc_span.innerHTML = this.getCalculatedValue(); }); });

For horizontal Sliders, multiplying the offset by -1 makes values increase right-to-left.

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

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