Yahoo! Developer Network Home - Help

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.

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:

Markup:

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:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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