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

{{>slider-skin-markup}} {{>slider-skin-js}}

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 `` is good enough.

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

```
Round skin (dark)
```

Full Code Listing

This is the full code listing for this example.

Markup

``` {{>slider-skin-markup}} ```

JavaScript

``` {{>slider-skin-js}} ```