<div class="intro">
<p>This `Dial` widget example shows the following:</p>

<ol>
    <li>A demonstration of a large value range combined with fine increment control.</li>
    <li>Setting UI strings before rendering</li>
    <li>Setting configuration attributes</li>
    <li>Construction-time event subscription allowing Dial to control an interactive UI</li>
    <li>Calling one of Dial's value change methods from the click of a link. `<a>Hubble</a>`</li>
</ol>
<p>Notice the Dial can traverse the entire 6,000+ pixels of the scene height, but by pulling the handle
farther away from the Dial's center while rotating, the user can get 1 pixel movements, without strain. 
After the dial has focus, the following keys also opperate the Dial, arrow up/down/left/right, page up/down, home, 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>
</div>

<div class="example yui3-skin-sam">
    {{>dial-interactive-source}}
</div>

<h3>Making a Dial Drive an Interactive UI</h3>

<p>The `valueChange` event of a `Dial` can be the means of controlling other UI displayed on a page.</p>

<h4>The Markup</h4>
{{>need-skin-note}}
```
<body class="yui3-skin-sam"> {{>need-skin-comment}}
```
<p>The only markup requirement for the `Dial` itself is an element to contain the Dial.
The rest of the markup and CSS in this example is just for the Hubble telescope visualization.
</p>

```
{{>dial-basic-markup}}
```

<h4>The JavaScript</h4>

<p>This example builds on previous examples by showing how to modify the visible UI strings before the dial renders.</p>

<p>During instatiation of a Dial, several configuration attributes can be set (see the code-block below); note the construction-time event subscription:</p>

```
{{>dial-interactive-script}}
```


<h5>The Event Handler</h5>

<p>
Preceding the code that instantiates the `Dial` widget, declare the event handler.
We can use the value of the `Dial` to do whatever we want, but
in this example the event handler updates the CSS `top` property of the pictorial scene `<div id="scene">` of Hubble's relationship to Earth.
This scene is moved up or down inside a framing element `<div class="viewframe">` that has CSS `overflow:hidden;`.
The reason `e.newVal` is multiplied by `10` is so that the scene moves 10px for every 1 kilometer of the `Dial`'s value.
</p>



```
/**
* The Dial's valueChange event is passed to this.
* sets the CSS top value of the pictoral scene of the earth to the hubble.
* This scene is an absolute positioned div inside another div with
* overflow set to hidden.
*/
setSceneY = function(e) {
    Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
}
```


<h3>Complete Example Source</h3>
```
{{>dial-interactive-complete}}
```
