Yahoo! Developer Network Home - Help

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.
  • 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:

Markup:

Code:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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