#

Jump to Table of Contents

# Example: Dial Linked With Text Input

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.

### Creating the Dial and a Text Input

A `Dial` can be created easily and rendered into existing markup.

#### The Markup

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <body class="yui3-skin-sam"> <!-- You need this skin class -->

This example includes an element to contain the Dial and a text input field.

    <div id="demo"></div>
    <input id="myTextInput" value=""/>

#### The JavaScript

`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.

    YUI().use('dial', function(Y) {

        var dial = new Y.Dial({
            min:-220,
            max:220,
            stepsPerRevolution:100,
            value: 30
        });
        dial.render('#demo');

    });

### Linking the Dial to the Text Input

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 );

### Linking the Text Input to the Dial

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 );

### Complete Example Source

    <!DOCTYPE HTML>
    <html>
    <script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>

    <style>
    #demo {
        margin:0 0 1em;
    }

    #myTextInput {
        width:96px;
    }
    </style>

    <body class="yui3-skin-sam"> <!-- You need this skin class -->
        <div id="demo"></div>
        <input id="myTextInput" value=""/>
    </body>

    <script>
    YUI().use('dial', function(Y) {

        var dial = new Y.Dial({
            min:-220,
            max:220,
            stepsPerRevolution:100,
            value: 30
        });
        dial.render('#demo');

        // 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 );

        // Function to pass input value back to the Slider
        function updateDial( e ){
            dial.set( "value" , e.target.get( "value" ) - 0);
        }
        theInput.on( "keyup", updateDial );

        // Initialize the input
        theInput.set('value', dial.get('value'));

    });
    </script>
    </html>