YUI Library Home

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:

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 © 2010 Yahoo! Inc. All rights reserved.

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