This example shows how to create a basic Dial widget.
Drag the handle, or click the ring, 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.
A Dial can be created easily and rendered into existing markup.
The only markup requirement is an HTML element to contain the Dial.
<div id="demo"></div>
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().use('dial', function(Y) {
var dial = new Y.Dial({
min:-220,
max:220,
stepsPerRevolution:100,
value: 30
});
dial.render('#demo');
});
<!DOCTYPE HTML>
<html>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<body class="yui3-skin-sam">
<div id="demo"></div>
</body>
<script>
YUI().use('dial', function(Y) {
var dial = new Y.Dial({
min:-220,
max:220,
stepsPerRevolution:100,
value: 30
});
dial.render('#demo');
});
</script>
</html>