Slider: 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
andmaxGutter
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.
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.
Start with markup
For complete control of the DOM structure used by Slider, we'll start with markup that includes the boundingBox
and contentBox
that wrap all YUI widgets.
Slider is set up to inspect the DOM inside its contentBox
for rail, thumb, and thumb image elements. It does this by searching for specific class names assigned to elements. Add these classes to the markup and Slider will use those elements rather than create its own.
Instantiate the Slider
With the markup in place, all that's left to do is instantiate the Slider with references to the boundingBox
and contentBox
elements. It will automatically discover the nodes already in the markup.
Anchoring the Slider in a menu bar
Now we place the Slider markup inside the markup for the rest of the menu bar and wire up the speaker button UI and interaction. You can see the full CSS and JavaScript for the other controls in the Full Code Listing below.
We'll use the following sprite background image to show the appropriate icon for the volume level (quiet to loud) managed by a class applied to the contentBox
.

Below is the CSS we'll need to create the appearance. Note how some Sam skin styles for Slider have been overridden with more specific selectors.
We'll also set the default volume to 50 and reverse the Slider's min
and max
so the top corresponds to higher values. minGutter
and maxGutter
are also configured to limit the movable range of the thumb on the larger background.
Full Code Listing
Here is the full markup, CSS, and JavaScript for the entire example, including the volume input and mute controls.