2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="intro">

9aae541f6e4be1e9783755d358b260736bb1f20eJeff Conniff <p>This example shows how to create a basic `Dial` widget.</p>

5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff

9aae541f6e4be1e9783755d358b260736bb1f20eJeff Conniff <p>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 <a href="index.html#attributes" title="YUI 3: Dial">Dial's configuration attributes</a>.</p>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff</div>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="example yui3-skin-sam">

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff {{>dial-basic-source}}

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff</div>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h3>Creating a Dial</h3>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>A `Dial` can be created easily and rendered into existing markup.</p>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The Markup</h4>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>The only markup requirement is an HTML element to contain the Dial.</p>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff```

5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff {{>dial-basic-markup}}

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff```

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The JavaScript</h4>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>`Dial` extends the `Widget` class, following the same pattern

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffas any widget constructor. As a result, it accepts a configuration object to

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffset the initial configuration for the widget.</p>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>After creating and configuring the new `Dial`,

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffcall the `render` method on the `Dial` object, passing it

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffthe selector for a container element.

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThis renders it into the container and makes it usable.</p>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>Some commonly used configuration attributes are shown below. </p>

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff```

5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-basic-script}}

5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff```

5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff<h3>Complete Example Source</h3>

5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff```

5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-basic-complete}}

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff```

2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff