#

Jump to Table of Contents

# Example: Basic Dial

This example shows how to create a basic `Dial` widget.

Drag the handle, or click the ring, to set the value. When the handle has the focus, the following keys update its value: arrow keys, page up/down, home, and end. The action of these keys can be controlled via Dial's configuration attributes.

### Creating a Dial

A `Dial` can be created easily and rendered into existing markup.

#### The Markup

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <body class="yui3-skin-sam"> <!-- You need this skin class -->

The only markup requirement is an HTML element to contain the Dial.

    <div id="demo"></div>

#### The JavaScript

`Dial` extends the `Widget` class, following the same pattern as any widget constructor. As a result, it accepts a configuration object to set the initial configuration for the widget.

After creating and configuring the new `Dial`, call the `render` method on the `Dial` object, passing it the selector for a container element. This renders it into the container and makes it usable.

Some commonly used configuration attributes are shown below.

    YUI().use('dial', function(Y) {

        var dial = new Y.Dial({
            min:-220,
            max:220,
            stepsPerRevolution:100,
            value: 30
        });
        dial.render('#demo');

    });

### Complete Example Source

    <!DOCTYPE HTML>
    <html>
    <script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>

    <body class="yui3-skin-sam"> <!-- You need this skin class -->
        <div id="demo"></div>
    </body>

    <script>
    YUI().use('dial', function(Y) {

        var dial = new Y.Dial({
            min:-220,
            max:220,
            stepsPerRevolution:100,
            value: 30
        });
        dial.render('#demo');

    });
    </script>
    </html>