#

# Example: Alternate Skins

This example demonstrates the alternate skins available for Slider, and how to apply them.

#### Light skins

##### Sam skin

##### Capsule skin

##### Round skin

##### Audio skin (light)

#### Dark skins

##### Sam skin (dark)

##### Capsule skin (dark)

##### Round skin (dark)

##### Audio skin

### Specify the skin in the YUI config

To access alternate skins for a component, specify an override in the YUI configuration. The "slider" module is actually a virtual rollup of other modules, so you need to override the skin for "slider-base".

Then just `use("slider")` as you normally would.

    YUI({
        skin: {
            overrides: {
                "slider-base": [ "capsule" ]
            }
        }
    }).use( "slider", function (Y) {
        ...
    });

### Use the appropriate skin class in the markup

The default skin is the Sam skin. Style YUI components with this skin by including the class `yui3-skin-sam` in the class list of an element that contains the component. Typically, setting `<body class="yui3-skin-sam">` is good enough.

When overriding the default skin, use a different class on the containing element.

    <div class="yui3-skin-round-dark">
        <h5>Round skin (dark)</h5>
        <div id="round_dark"><!-- Slider rendered here --></div>
    </div>

### Full Code Listing

This is the full code listing for this example.

#### Markup

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

#### JavaScript

    <script>
    YUI({
        skin: {
            overrides: {
                'slider-base': [
                    '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>