This example shows how to create a `Dial` widget and link it to a text input.
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 Dial's configuration attributes.
Typing valid values into the text input updates the dial.
A `Dial` can be created easily and rendered into existing markup.
This example includes an element to contain the Dial and a text input field.
``` {{>dial-text-input-markup}} ````Dial` extends the `Widget` class, following the same pattern as any widget constructor, accepting a configuration object to set the initial configuration for the widget.
After creating and configuring the new `Dial`, call the `render` method on your `Dial` object passing it the selector of a container element. This renders it in the container and makes it usable.
Some commonly used configuration attributes are shown below.
``` {{>dial-basic-script}} ```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.
For sending Dial values to the input, the relevant Dial event is `valueChange`.
``` // Function to update the text input value from the Dial value function updateInput( e ){ var val = e.newVal; if ( isNaN( val ) ) { // Not a valid number. return; } this.set( "value", val ); } var theInput = Y.one( "#myTextInput" ); // Subscribe to the Dial's valueChange event, passing the input as the 'this' dial.on( "valueChange", updateInput, theInput ); ```To send changes from the text input back to the Dial, we'll listen to the `keyup` event on `theInput`.
``` // Function to pass input value back to the Dial function updateDial( e ){ dial.set( "value" , e.target.get( "value" ) - 0); } theInput.on( "keyup", updateDial ); ```