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>