<div id="demo">

<div class="yui3-g">

<div class="yui3-u-1-2">

<div class="light">

<h4>Light skins</h4>

<div class="yui3-skin-sam">

<h5>Sam skin</h5>

<div id="sam"></div>

</div>

<div class="yui3-skin-capsule">

<h5>Capsule skin</h5>

<div id="capsule"></div>

</div>

<div class="yui3-skin-round">

<h5>Round skin</h5>

<div id="round"></div>

</div>

<div class="yui3-skin-audio-light">

<h5>Audio skin (light)</h5>

<div id="audio_light"></div>

</div>

</div>

</div>

<div class="yui3-u-1-2">

<div class="dark">

<h4>Dark skins</h4>

<div class="yui3-skin-sam-dark">

<h5>Sam skin (dark)</h5>

<div id="sam_dark"></div>

</div>

<div class="yui3-skin-capsule-dark">

<h5>Capsule skin (dark)</h5>

<div id="capsule_dark"></div>

</div>

<div class="yui3-skin-round-dark">

<h5>Round skin (dark)</h5>

<div id="round_dark"></div>

</div>

<div class="yui3-skin-audio">

<h5>Audio skin</h5>

<div id="audio"></div>

</div>

</div>

</div>

</div>

</div>

<script>

YUI(

skin: {

overrides: {

slider: [

'sam', // The default skin

'sam-dark', // Suited for dark backgrounds

'capsule', // You only need to include one skin

'capsule-dark', // in the overrides section unless you

// are using multiple skins on the same page

'round',

'round-dark',

'audio-light',

'audio'

]

}

}

}).use('slider', function ( Y ) {

new Y.Slider().render( '#sam' );

new Y.Slider().render( '#sam_dark' );

new Y.Slider().render( '#capsule' );

new Y.Slider().render( '#capsule_dark' );

new Y.Slider().render( '#round' );

new Y.Slider().render( '#round_dark' );

new Y.Slider().render( '#audio_light' );

new Y.Slider().render( '#audio' );

} );

</script>