YUI 3.x Home -

YUI Library Examples: Dial: Dial Linked With Text Input

Dial: 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.

View example in new window.

Creating the Dial and a Text Input

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

The Markup

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

  1. <div id="demo"></div>
  2. <input id="myTextInput" value=""/>
<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. 

  1. YUI({ filter: 'raw' }).use("dial", function(Y) {
  2.  
  3. 	var dial = new Y.Dial({
  4. 		min:-220,
  5. 		max:220,
  6. 		stepsPerRev:100,
  7. 		value: 30
  8. 	});
  9. 	dial.render("#demo");
  10.  
  11. });
YUI({ filter: 'raw' }).use("dial", function(Y) {
 
	var dial = new Y.Dial({
		min:-220,
		max:220,
		stepsPerRev: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.

  1. // Function to update the text input value from the Dial value
  2. function updateInput( e ){
  3. 	var val = e.newVal;
  4. 	if ( isNaN( val ) ) {
  5. 		// Not a valid number.
  6. 		return;
  7. 	}
  8. 	this.set( "value", val );
  9. }
  10.  
  11. var theInput = Y.one( "#myTextInput" );
  12. // Subscribe to the Dial's valueChange event, passing the input as the 'this'
  13. dial.on( "valueChange", updateInput, theInput );
// 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.

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

Full Code Listing

The Markup

  1. <div id="demo"></div>
  2. <input id="myTextInput" value=""/>
<div id="demo"></div>
<input id="myTextInput" value=""/>

The JavaScript

  1. YUI({ filter: 'raw' }).use("dial", function(Y) {
  2.  
  3. 	var dial = new Y.Dial({
  4. 		min:-220,
  5. 		max:220,
  6. 		stepsPerRev:100,
  7. 		value: 30
  8. 	});
  9. 	dial.render('#demo');
  10.  
  11.  
  12. 	// Function to update the text input value from the Dial value
  13. 	function updateInput( e ){
  14. 		var val = e.newVal;
  15. 		if ( isNaN( val ) ) {
  16. 			// Not a valid number.
  17. 			return;
  18. 		}
  19. 		this.set( "value", val );
  20. 	}
  21.  
  22. 	var theInput = Y.one( "#myTextInput" );
  23. 	// Subscribe to the Dial's valueChange event, passing the input as the 'this'
  24. 	dial.on( "valueChange", updateInput, theInput );
  25.  
  26. 	// Function to pass input value back to the Slider
  27. 	function updateDial( e ){
  28. 		dial.set( "value" , e.target.get( "value" ) - 0);
  29. 	}
  30. 	theInput.on( "keyup", updateDial );
  31.  
  32. 	// Initialize the input
  33. 	theInput.set('value', dial.get('value'));
  34. });
YUI({ filter: 'raw' }).use("dial", function(Y) {
 
	var dial = new Y.Dial({
		min:-220,
		max:220,
		stepsPerRev: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'));
});

More Dial Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings