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>
+
+