Creating a Slider from existing markup

This example illustrates how to create a Slider using existing markup. The boundingBox and contentBox are included in the markup and passed to the constructor. Standard class names are assigned to the DOM elements inside the contentBox that will result in them being discovered and automatically used.

The visualization of the Slider is based on the volume control in Mac OS X 10.5, with additional controls included for illustration. Click on the speaker icon to show the Slider.

Things to note about this example:

The Slider is rendered into a hidden container, and the syncUI method called when it is made visible
Some default Sam skin style is overridden to support the implementation
minGutter and maxGutter configuration is used to limit the thumb movement inside the larger rail element and image.
There is no whitespace in the markup around the thumb's <img> element to avoid an IE layout bug.

volume

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.

Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.