YUI Library Examples: Dial: Basic Dial

Dial: Basic Dial

Creating a Dial

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

The Markup

The only markup requirement is an HTML element to contain the Dial.

<div id="demo"></div>

<div id="demo"></div>

The JavaScript

Dial extends the Widget class, following the same pattern as any widget constructor. As a result, it accepts a configuration object to set the initial configuration for the widget.

After creating and configuring the new Dial, call the render method on the Dial object, passing it the selector for a container element. This renders it into the container and makes it usable.

Some commonly used configuration attributes are shown below.

YUI({ filter: 'raw' }).use("dial", function(Y) {
 
	var dial = new Y.Dial({
		min:-220,
		max:220,
		stepsPerRev:100,
		value: 30
	});
	dial.render("#demo");
 
});

YUI({ filter: 'raw' }).use("dial", function(Y) {
 
	var dial = new Y.Dial({
		min:-220,
		max:220,
		stepsPerRev:100,
		value: 30
	});
	dial.render("#demo");
 
});