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}} {{>color-harmony-output-html}} ```

This could use a little CSS for positioning, so let's get to that next.

``` {{>picker-source-css}} {{>color-harmony-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

``` {{>color-harmony-output-js-vars}} ```

Ouput Functions

``` {{>color-harmony-output-js-func}} ```

Provide Useful Information

Let's be honest, having a bunch of colors show up on the screen isn't really useful if you cannot get the value easily.

One solution is to provide a tooltip with the hex, rgb, and hsl values when the user clicks on the swatch. So let's set that up.

``` {{>color-harmony-output-js-tool}} ```

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