YUI 3.x Home -

YUI Library Examples: Slider: Creating a Slider from existing markup

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

View example in new window.

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.

  1. <!-- boundingBox -->
  2. <div id="volume_slider">
  3.     <!-- contentBox -->
  4.     <div id="volume_slider_content">
  5.         <!-- rail -->
  6.         <div>
  7.             <!-- thumb and thumb image (see note above about whitespace) -->
  8.             <div><img src="assets/images/thumb.png" height="17" width="17"></div>
  9.         </div>
  10.     </div>
  11. </div>
<!-- boundingBox -->
<div id="volume_slider">
    <!-- contentBox -->
    <div id="volume_slider_content">
        <!-- rail -->
        <div>
            <!-- thumb and thumb image (see note above about whitespace) -->
            <div><img src="assets/images/thumb.png" height="17" width="17"></div>
        </div>
    </div>
</div>

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.

  1. <div id="volume_slider"><!-- boundingBox -->
  2.     <div id="volume_slider_content"><!-- contentBox -->
  3.         <div class="yui-slider-rail">
  4.             <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
  5.         </div>
  6.     </div>
  7. </div>
<div id="volume_slider"><!-- boundingBox -->
    <div id="volume_slider_content"><!-- contentBox -->
        <div class="yui-slider-rail">
            <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
        </div>
    </div>
</div>

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.

  1. // Create a YUI instance and request the slider module and its dependencies
  2. YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {
  3.  
  4. var volume = new Y.Slider({
  5.     boundingBox: '#volume_slider',
  6.     contentBox : '#volume_slider_content',
  7.     railSize   : '117px'
  8. });
  9.  
  10. });
// Create a YUI instance and request the slider module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {
 
var volume = new Y.Slider({
    boundingBox: '#volume_slider',
    contentBox : '#volume_slider_content',
    railSize   : '117px'
});
 
});

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.

  1. <div id="volume_control" class="volume-hide">
  2.     <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
  3.     <div id="volume_slider">
  4.         <div id="volume_slider_content">
  5.             <div class="yui-slider-rail">
  6.                 <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
  7.             </div>
  8.         </div>
  9.     </div>
  10.     <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
  11.     <button type="button" title="Mute" id="mute"><p>mute</p></button>
  12. </div>
<div id="volume_control" class="volume-hide">
    <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
    <div id="volume_slider">
        <div id="volume_slider_content">
            <div class="yui-slider-rail">
                <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
            </div>
        </div>
    </div>
    <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
    <button type="button" title="Mute" id="mute"><p>mute</p></button>
</div>

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.

image sprite of speaker icon in active and inactive quiet to loud states

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.

  1. /* Override some default Sam skin styles */
  2. #volume_control .yui-slider {
  3.     display: block;
  4.     position: absolute;
  5.     top: 22px;
  6.     vertical-align: top;
  7. }
  8.  
  9. #volume_control .yui-slider-rail {
  10.     background: url("assets/images/rail.png") no-repeat 0 0;
  11.     height: 117px;
  12.     width: 17px;
  13.     padding: 0 7px;
  14. }
  15.  
  16. /* Use a sprite for the speaker icon */
  17. #volume_icon {
  18.     background: url("assets/images/volume_icon.png") no-repeat -30px 0;
  19.     border: none;
  20.     height: 22px;
  21.     overflow: hidden;
  22.     width: 31px;
  23. }
  24.  
  25. /*
  26.  * adjust the speaker icon sprite in accordance with volume level and
  27.  * active state
  28. */
  29. #demo .volume-hide .level_0 { background-position: -31px 0; }
  30. #demo .volume-hide .level_1 { background-position: -31px -22px; }
  31. #demo .volume-hide .level_2 { background-position: -31px -44px; }
  32. #demo .volume-hide .level_3 { background-position: -31px -66px; }
  33.  
  34. #demo .level_0,
  35. #demo .level_0:hover {
  36.     background-position: 0 0;
  37. }
  38. #demo .level_1,
  39. #demo .level_1:hover {
  40.     background-position: 0 -22px;
  41. }
  42. #demo .level_2,
  43. #demo .level_2:hover {
  44.     background-position: 0 -44px;
  45. }
  46. #demo .level_3,
  47. #demo .level_3:hover {
  48.     background-position: 0 -66px;
  49. }
/* Override some default Sam skin styles */
#volume_control .yui-slider {
    display: block;
    position: absolute;
    top: 22px;
    vertical-align: top;
}
 
#volume_control .yui-slider-rail {
    background: url("assets/images/rail.png") no-repeat 0 0;
    height: 117px;
    width: 17px;
    padding: 0 7px;
}
 
/* Use a sprite for the speaker icon */
#volume_icon {
    background: url("assets/images/volume_icon.png") no-repeat -30px 0;
    border: none;
    height: 22px;
    overflow: hidden;
    width: 31px;
}
 
/*
 * adjust the speaker icon sprite in accordance with volume level and
 * active state
*/
#demo .volume-hide .level_0 { background-position: -31px 0; }
#demo .volume-hide .level_1 { background-position: -31px -22px; }
#demo .volume-hide .level_2 { background-position: -31px -44px; }
#demo .volume-hide .level_3 { background-position: -31px -66px; }
 
#demo .level_0,
#demo .level_0:hover {
    background-position: 0 0;
}
#demo .level_1,
#demo .level_1:hover {
    background-position: 0 -22px;
}
#demo .level_2,
#demo .level_2:hover {
    background-position: 0 -44px;
}
#demo .level_3,
#demo .level_3:hover {
    background-position: 0 -66px;
}

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.

  1. // Create a YUI instance and request the slider module and its dependencies
  2. YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {
  3.  
  4. var control    = Y.one('#volume_control'),
  5.     icon       = Y.one('#volume_icon'),
  6.     open       = false,
  7.     level      = 2,
  8.     volume;
  9.  
  10. // Notice the chained call to render()
  11. volume = new Y.Slider({
  12.     boundingBox: sliderBox,
  13.     contentBox : '#volume_slider_content',
  14.     axis       : 'y',
  15.     min        : 100,
  16.     max        : 0,
  17.     value      : 50,
  18.     railSize   : '117px',
  19.     minGutter  : 9,
  20.     maxGutter  : 11
  21. }).render();
  22.  
  23. // Initialize event listeners
  24. volume.after('valueChange', updateIcon);
  25.  
  26. icon.on('click', showHideSlider);
  27.  
  28. Y.on('click', handleDocumentClick, 'document');
  29.  
  30.  
  31. /*
  32.  * Support functions
  33.  */
  34.  
  35. // Adjust the class responsible for displaying the correct speaker icon
  36. function updateIcon(e) {
  37.     var newLevel = e.newVal && Math.ceil(e.newVal / 34);
  38.  
  39.     if (level !== newLevel) {
  40.         volume.get('boundingBox').replaceClass('level_'+level, 'level_'+newLevel);
  41.         level = newLevel;
  42.     }
  43. }
  44.  
  45. // Show or hide the Slider in response to clicking on the speaker icon
  46. function showHideSlider(e) {
  47.     control.toggleClass('volume-hide');
  48.     open = !open;
  49.  
  50.     if (open) {
  51.         // Needed to correctly place the thumb
  52.         volume.syncUI();
  53.     }
  54. }
  55.  
  56. // Close the Slider when clicking elsewhere on the page
  57. function handleDocumentClick(e) {
  58.     if (open && !icon.contains(e.target) &&
  59.             !volume.get('boundingBox').contains(e.target)) {
  60.         showHideSlider();
  61.     }
  62. }
// Create a YUI instance and request the slider module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {
 
var control    = Y.one('#volume_control'),
    icon       = Y.one('#volume_icon'),
    open       = false,
    level      = 2,
    volume;
 
// Notice the chained call to render()
volume = new Y.Slider({
    boundingBox: sliderBox,
    contentBox : '#volume_slider_content',
    axis       : 'y',
    min        : 100,
    max        : 0,
    value      : 50,
    railSize   : '117px',
    minGutter  : 9,
    maxGutter  : 11
}).render();
 
// Initialize event listeners
volume.after('valueChange', updateIcon);
 
icon.on('click', showHideSlider);
 
Y.on('click', handleDocumentClick, 'document');
 
 
/*
 * Support functions
 */
 
// Adjust the class responsible for displaying the correct speaker icon
function updateIcon(e) {
    var newLevel = e.newVal && Math.ceil(e.newVal / 34);
 
    if (level !== newLevel) {
        volume.get('boundingBox').replaceClass('level_'+level, 'level_'+newLevel);
        level = newLevel;
    }
}
 
// Show or hide the Slider in response to clicking on the speaker icon
function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;
 
    if (open) {
        // Needed to correctly place the thumb
        volume.syncUI();
    }
}
 
// Close the Slider when clicking elsewhere on the page
function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}

Full Code Listing

Here is the full markup, CSS, and JavaScript for the entire example, including the volume input and mute controls.

Markup

  1. <div id="demo">
  2.     <div id="volume_control" class="volume-hide">
  3.         <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
  4.         <div id="volume_slider">
  5.             <div id="volume_slider_content">
  6.                 <div class="yui-slider-rail">
  7.                     <!-- IE expands whitespace around img tags into padding -->
  8.                     <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
  9.                 </div>
  10.             </div>
  11.         </div>
  12.         <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
  13.         <button type="button" title="Mute" id="mute"><p>mute</p></button>
  14.     </div>
  15.  
  16.     <div class="demo-content">
  17.         <p>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.</p>
  18.         <p>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.</p>
  19.     </div>
  20. </div>
<div id="demo">
    <div id="volume_control" class="volume-hide">
        <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
        <div id="volume_slider">
            <div id="volume_slider_content">
                <div class="yui-slider-rail">
                    <!-- IE expands whitespace around img tags into padding -->
                    <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
                </div>
            </div>
        </div>
        <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
        <button type="button" title="Mute" id="mute"><p>mute</p></button>
    </div>
 
    <div class="demo-content">
        <p>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.</p>
        <p>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.</p>
    </div>
</div>

JavaScript

  1. // Create a YUI instance and request the slider module and its dependencies
  2. YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {
  3.  
  4. var control    = Y.one('#volume_control'),
  5.     sliderBox  = Y.one('#volume_slider'),
  6.     volInput   = Y.one('#volume'),
  7.     icon       = Y.one('#volume_icon'),
  8.     mute       = Y.one('#mute'),
  9.     open       = false,
  10.     level      = 2,
  11.     beforeMute = 0,
  12.     wait,
  13.     volume;
  14.  
  15. sliderBox.setStyle('left',icon.get('offsetLeft')+'px');
  16.  
  17. volume = new Y.Slider({
  18.         boundingBox: sliderBox,
  19.         contentBox : '#volume_slider_content',
  20.         axis       : 'y',
  21.         min        : 100,
  22.         max        : 0,
  23.         value      : 50,
  24.         railSize   : '117px',
  25.         minGutter  : 9,
  26.         maxGutter  : 11
  27.     }).render();
  28.  
  29. // Initialize event listeners
  30. volume.after('valueChange', updateInput);
  31. volume.after('valueChange', updateIcon);
  32.  
  33. mute.on('click', muteVolume);
  34.  
  35. volInput.on({
  36.     keydown : handleInput,
  37.     keyup   : updateVolume
  38. });
  39.  
  40. icon.on('click', showHideSlider);
  41.  
  42. Y.on('click', handleDocumentClick, document);
  43.  
  44. // Support functions
  45. function updateInput(e) {
  46.     if (e.src !== 'KEY') {
  47.         volInput.set('value',e.newVal);
  48.     }
  49. }
  50.  
  51. function updateIcon(e) {
  52.     var newLevel = e.newVal && Math.ceil(e.newVal / 34);
  53.  
  54.     if (level !== newLevel) {
  55.         icon.replaceClass('level_'+level, 'level_'+newLevel);
  56.         level = newLevel;
  57.     }
  58. }
  59.  
  60. function muteVolume(e) {
  61.     var disabled = !volume.get('disabled');
  62.     volume.set('disabled', disabled);
  63.  
  64.     if (disabled) {
  65.         beforeMute = volume.getValue();
  66.         volume.setValue(0);
  67.         this.set('innerHTML','unmute');
  68.         volInput.set('disabled','disabled');
  69.     } else {
  70.         volume.set('value', beforeMute);
  71.         this.set('innerHTML','mute');
  72.         volInput.set('disabled','');
  73.     }
  74. }
  75.  
  76. function handleInput(e) {
  77.     // Allow only numbers and various other control keys
  78.     if (e.keyCode > 57) {
  79.         e.halt();
  80.     }
  81. }
  82.  
  83. function updateVolume(e) {
  84.     // delay input processing to give the user time to type
  85.     if (wait) {
  86.         wait.cancel();
  87.     }
  88.  
  89.     wait = Y.later(400, null, function () {
  90.         var value = parseInt(volInput.get('value'),10) || 0;
  91.  
  92.         if (value > 100) {
  93.             volInput.set('value', 100);
  94.             value = 100
  95.         }
  96.  
  97.         volume.setValue(value, { src: 'KEY' });
  98.     });
  99. }
  100.  
  101. function showHideSlider(e) {
  102.     control.toggleClass('volume-hide');
  103.     open = !open;
  104.  
  105.     if (open) {
  106.         volume.syncUI();
  107.     }
  108.  
  109.     if (e) {
  110.         e.preventDefault();
  111.     }
  112. }
  113.  
  114. function handleDocumentClick(e) {
  115.     if (open && !icon.contains(e.target) &&
  116.             !volume.get('boundingBox').contains(e.target)) {
  117.         showHideSlider();
  118.     }
  119. }
  120.  
  121. });
// Create a YUI instance and request the slider module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {
 
var control    = Y.one('#volume_control'),
    sliderBox  = Y.one('#volume_slider'),
    volInput   = Y.one('#volume'),
    icon       = Y.one('#volume_icon'),
    mute       = Y.one('#mute'),
    open       = false,
    level      = 2,
    beforeMute = 0,
    wait,
    volume;
 
sliderBox.setStyle('left',icon.get('offsetLeft')+'px');
 
volume = new Y.Slider({
        boundingBox: sliderBox,
        contentBox : '#volume_slider_content',
        axis       : 'y',
        min        : 100,
        max        : 0,
        value      : 50,
        railSize   : '117px',
        minGutter  : 9,
        maxGutter  : 11
    }).render();
 
// Initialize event listeners
volume.after('valueChange', updateInput);
volume.after('valueChange', updateIcon);
 
mute.on('click', muteVolume);
 
volInput.on({
    keydown : handleInput,
    keyup   : updateVolume
});
 
icon.on('click', showHideSlider);
 
Y.on('click', handleDocumentClick, document);
 
// Support functions
function updateInput(e) {
    if (e.src !== 'KEY') {
        volInput.set('value',e.newVal);
    }
}
 
function updateIcon(e) {
    var newLevel = e.newVal && Math.ceil(e.newVal / 34);
 
    if (level !== newLevel) {
        icon.replaceClass('level_'+level, 'level_'+newLevel);
        level = newLevel;
    }
}
 
function muteVolume(e) {
    var disabled = !volume.get('disabled');
    volume.set('disabled', disabled);
 
    if (disabled) {
        beforeMute = volume.getValue();
        volume.setValue(0);
        this.set('innerHTML','unmute');
        volInput.set('disabled','disabled');
    } else {
        volume.set('value', beforeMute);
        this.set('innerHTML','mute');
        volInput.set('disabled','');
    }
}
 
function handleInput(e) {
    // Allow only numbers and various other control keys
    if (e.keyCode > 57) {
        e.halt();
    }
}
 
function updateVolume(e) {
    // delay input processing to give the user time to type
    if (wait) {
        wait.cancel();
    }
 
    wait = Y.later(400, null, function () {
        var value = parseInt(volInput.get('value'),10) || 0;
 
        if (value > 100) {
            volInput.set('value', 100);
            value = 100
        }
 
        volume.setValue(value, { src: 'KEY' });
    });
}
 
function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;
 
    if (open) {
        volume.syncUI();
    }
 
    if (e) {
        e.preventDefault();
    }
}
 
function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}
 
});

CSS

  1. #demo {
  2.     background: #fff;
  3.     border: 1px solid #999;
  4.     color: #000;
  5. }
  6.  
  7. #volume_control {
  8.     height: 22px;
  9.     line-height: 22px;
  10.     background: url("assets/images/bg.png") repeat-x 0 -22px;
  11.     position: relative;
  12. }
  13.  
  14. #volume_control label {
  15.     font-weight: bold;
  16.     height: 22px;
  17.     margin: 0 1ex 0 1em;
  18.     vertical-align: top;
  19.     zoom: 1;
  20. }
  21.  
  22. #volume {
  23.     border: 1px inset #999;
  24.     height: 16px;
  25.     margin: 2px 1ex 0 0;
  26.     padding: 0 3px;
  27.     text-align: right;
  28.     vertical-align: top;
  29.     width: 2em;
  30. }
  31.  
  32. /* Override some default Sam skin styles */
  33. #volume_control .yui-slider {
  34.     display: block;
  35.     position: absolute;
  36.     top: 22px;
  37.     vertical-align: top;
  38. }
  39.  
  40. #volume_control .yui-slider-rail {
  41.     background: url("assets/images/rail.png") no-repeat 0 0;
  42.     height: 117px;
  43.     width: 17px;
  44.     padding: 0 7px;
  45. }
  46.  
  47. /* Support open/close action for the slider */
  48. #demo .volume-hide #volume_slider {
  49.     display: none;
  50. }
  51.  
  52. /* Use a sprite for the speaker icon */
  53. #volume_icon {
  54.     background: url("assets/images/volume_icon.png") no-repeat -30px 0;
  55.     border: none;
  56.     height: 22px;
  57.     overflow: hidden;
  58.     width: 31px;
  59. }
  60.  
  61. /* move the button text offscreen left */
  62. #volume_icon p {
  63.     text-indent: -9999px;
  64. }
  65.  
  66. #mute {
  67.     background: url("assets/images/bg.png") repeat-x 0 -22px;
  68.     border: none;
  69.     height: 22px;
  70.     vertical-align: top;
  71. }
  72.  
  73. #mute p {
  74.     margin: 0;
  75. }
  76.  
  77. #mute:hover {
  78.     background-position: 0 0;
  79.     color: #fff;
  80. }
  81.  
  82. /*
  83.  * adjust the speaker icon sprite in accordance with volume level and
  84.  * active state
  85. */
  86. #demo .volume-hide .level_0 { background-position: -31px 0; }
  87. #demo .volume-hide .level_1 { background-position: -31px -22px; }
  88. #demo .volume-hide .level_2 { background-position: -31px -44px; }
  89. #demo .volume-hide .level_3 { background-position: -31px -66px; }
  90.  
  91. #demo .level_0,
  92. #demo .level_0:hover {
  93.     background-position: 0 0;
  94. }
  95. #demo .level_1,
  96. #demo .level_1:hover {
  97.     background-position: 0 -22px;
  98. }
  99. #demo .level_2,
  100. #demo .level_2:hover {
  101.     background-position: 0 -44px;
  102. }
  103. #demo .level_3,
  104. #demo .level_3:hover {
  105.     background-position: 0 -66px;
  106. }
  107.  
  108. #demo .demo-content {
  109.     padding: 1ex 1em;
  110. }
#demo {
    background: #fff;
    border: 1px solid #999;
    color: #000;
}
 
#volume_control {
    height: 22px;
    line-height: 22px;
    background: url("assets/images/bg.png") repeat-x 0 -22px;
    position: relative;
}
 
#volume_control label {
    font-weight: bold;
    height: 22px;
    margin: 0 1ex 0 1em;
    vertical-align: top;
    zoom: 1;
}
 
#volume {
    border: 1px inset #999;
    height: 16px;
    margin: 2px 1ex 0 0;
    padding: 0 3px;
    text-align: right;
    vertical-align: top;
    width: 2em;
}
 
/* Override some default Sam skin styles */
#volume_control .yui-slider {
    display: block;
    position: absolute;
    top: 22px;
    vertical-align: top;
}
 
#volume_control .yui-slider-rail {
    background: url("assets/images/rail.png") no-repeat 0 0;
    height: 117px;
    width: 17px;
    padding: 0 7px;
}
 
/* Support open/close action for the slider */
#demo .volume-hide #volume_slider {
    display: none;
}
 
/* Use a sprite for the speaker icon */
#volume_icon {
    background: url("assets/images/volume_icon.png") no-repeat -30px 0;
    border: none;
    height: 22px;
    overflow: hidden;
    width: 31px;
}
 
/* move the button text offscreen left */
#volume_icon p {
    text-indent: -9999px;
}
 
#mute {
    background: url("assets/images/bg.png") repeat-x 0 -22px;
    border: none;
    height: 22px;
    vertical-align: top;
}
 
#mute p {
    margin: 0;
}
 
#mute:hover {
    background-position: 0 0;
    color: #fff;
}
 
/*
 * adjust the speaker icon sprite in accordance with volume level and
 * active state
*/
#demo .volume-hide .level_0 { background-position: -31px 0; }
#demo .volume-hide .level_1 { background-position: -31px -22px; }
#demo .volume-hide .level_2 { background-position: -31px -44px; }
#demo .volume-hide .level_3 { background-position: -31px -66px; }
 
#demo .level_0,
#demo .level_0:hover {
    background-position: 0 0;
}
#demo .level_1,
#demo .level_1:hover {
    background-position: 0 -22px;
}
#demo .level_2,
#demo .level_2:hover {
    background-position: 0 -44px;
}
#demo .level_3,
#demo .level_3:hover {
    background-position: 0 -66px;
}
 
#demo .demo-content {
    padding: 1ex 1em;
}

More Slider Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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