Version 3.10.1

Example: Basic Dial

Jump to Table of Contents

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.

Creating a Dial

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

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

<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().use('dial', function(Y) {

    var dial = new Y.Dial({
        min:-220,
        max:220,
        stepsPerRevolution:100,
        value: 30
    });
    dial.render('#demo');

});

Complete Example Source

<!DOCTYPE HTML>
<html>
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>

<body class="yui3-skin-sam"> <!-- You need this skin class -->
    <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>