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.
``` {{>dial-basic-markup}} ````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.
``` {{>dial-basic-script}} ```