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.18.1/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>