Setting Up the HSL Picker UI

This example takes advantage of the `dial` and `slider` widgets. We will use the dial widget to represent and select the hue from the 360 degree color wheel.

Next we will use two sliders to select the saturation and luminance.

``` {{>picker-source-html}} {{>hue-picker-output-html}} ```

This layout could use some CSS TLC, so let's get to that next.

``` {{>picker-source-css}} {{>hue-picker-output-css}} ```

Setting Up the YUI Instance

Now we need to create our YUI instance and tell it to load the `color`, `slider`, `dial` and `event-valuechange` modules.

``` YUI().use('dial', 'slider', 'event-valuechange', 'color', function (Y) { // Code Here. }); ``` {{>build-color-picker-doc-js}}

Building The Picker's Output

Initializing Output Variables

``` {{>hue-picker-output-js-vars}} ```

Binding Output UI

``` {{>hue-picker-output-js-bind}} ```

Ouput Functions

``` {{>hue-picker-output-js-func}} ```

Get It Started

Our last step is to make sure we set the initial view of the UI when everything has loaded. We can do this by simply calling `updatePickerUI`.

``` {{>picker-source-js-start}} ```