YUI Library Home

YUI Library Examples: Slider Control: Horizontal Slider with two thumbs

Slider Control: Horizontal Slider with two thumbs

This example demonstrates a simple horizontal dual-thumb Slider implementation. Some characteristics to note include the following:

  • The thumbs are set on a slide bar with a 200 pixel range.
  • A minimum distance is provided, preventing the thumbs from coming within 10 pixels of each other.
  • Initial min and max values are supplied as 100 and 130 respectively.
  • Clicking on the background will animate the nearest thumb.
  • Min and Max value offsets are calculated from the center of the thumbs and must be accounted for conversion calculations.

Raw values:

Converted values:

Building a dual thumb Slider

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.
  • We use the Sam skin and thumb images left-thumb.png and right-thumb.png.

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

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