YUI Library Examples: Slider Control: Basic Vertical Slider

Slider Control: Basic Vertical Slider

This example demonstrates a simple horizontal 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.

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:

Markup:

Code:

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.

More Slider Control Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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