YUI Library Home

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.

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:

Markup:

Code:

.

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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