This `Dial` widget example shows the following:

  1. A demonstration of a large value range combined with fine increment control.
  2. Setting UI strings before rendering
  3. Setting configuration attributes
  4. Construction-time event subscription allowing Dial to control an interactive UI
  5. Calling one of Dial's value change methods from the click of a link. `Hubble`

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 Dial's configuration attributes.

{{>dial-interactive-source}}

Making a Dial Drive an Interactive UI

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

The Markup

{{>need-skin-note}} ``` {{>need-skin-comment}} ```

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.

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

The JavaScript

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

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

``` {{>dial-interactive-script}} ```
The Event Handler

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 `

` of Hubble's relationship to Earth. This scene is moved up or down inside a framing element `
` 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.

``` /** * 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'); } ```

Complete Example Source

``` {{>dial-interactive-complete}} ```