Yahoo! Developer Network Home - Help

YUI Library Examples: Slider Control: Dual-thumb Slider with range highlight

Slider Control: Dual-thumb Slider with range highlight

This example demonstrates a horizontal dual-thumb Slider with custom code to add a highlight to the bounded range. Some characteristics to note include the following:

  • The thumbs are set on a slide bar with a 300 pixel range.
  • The thumbs are configured with a 12 pixel tick size.
  • Clicking on the background will animate the nearest thumb.

Range offsets: 0 - 300

Status: ok

Adding a range highlight to a dual thumb Slider

DualSlider does not come prebuilt with support for a range highlight. This example demonstrates how to add this functionality to a DualSlider.

You supply your own markup for the slider. Keep in mind the following points about markup for YUI Dual Thumb Slider Control implementations:

  • The thumb elements should be children of the slider background.
  • We use <img> elements rather than a CSS background for the thumbs to get around a performance bottleneck when animating thumb positions in IE.
  • Don't apply a CSS border to the slider background.
  • The background element should have an explicit CSS position: relative or absolute.
  • Both thumb elements should have an explicit CSS position: absolute and be initially placed at the zero position of the background. Set their initial position in the constructor if desired.

CSS:

The example will use the css sprites technique to change the color of the highlight based on assigned classes.

Markup:

Here we add an additional span element to use as our highlight.

Code:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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