2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="intro">
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <p>This example shows how to create a `Dial` widget and link it to a text input.</p>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <p>Drag the handle 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>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <p>Typing valid values into the text input updates the dial.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="example yui3-skin-sam">
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-text-input-source}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h3>Creating the Dial and a Text Input</h3>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>A `Dial` can be created easily and rendered into existing markup.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The Markup</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>This example includes an element to contain the Dial and a text input field.</p>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-text-input-markup}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The JavaScript</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>`Dial` extends the `Widget` class, following the same pattern
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffas any widget constructor, accepting a configuration object to
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffset the initial configuration for the widget.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>After creating and configuring the new `Dial`,
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffcall the `render` method on your `Dial` object passing it
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffthe selector of a container element.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThis renders it in the container and makes it usable.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>Some commonly used configuration attributes are shown below.
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff<!-- intentionally using dial-basic-script here -->
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-basic-script}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h3>Linking the Dial to the Text Input</h3>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>To keep the Dial's value and a text input value in sync, we need to subscribe to events on both the text input and the Dial.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>For sending Dial values to the input, the relevant Dial event is `valueChange`.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff// Function to update the text input value from the Dial value
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Connifffunction updateInput( e ){
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff if ( isNaN( val ) ) {
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff // Not a valid number.
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff this.set( "value", val );
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffvar theInput = Y.one( "#myTextInput" );
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff// Subscribe to the Dial's valueChange event, passing the input as the 'this'
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffdial.on( "valueChange", updateInput, theInput );
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h3>Linking the Text Input to the Dial</h3>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>To send changes from the text input back to the Dial, we'll listen to the `keyup` event on `theInput`.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff// Function to pass input value back to the Dial
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Connifffunction updateDial( e ){
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff dial.set( "value" , e.target.get( "value" ) - 0);
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConnifftheInput.on( "keyup", updateDial );
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff<h3>Complete Example Source</h3>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-text-input-complete}}