Setting Up the Sliders

First we need to construct the HTML for the UI. This will consist of three sliders and three output boxes.

``` {{>rgb-slider-source-html}} ```

Now we give the list some CSS to make it a little easier to use.

``` {{>rgb-slider-source-css}} ```

Setting Up the YUI Instance

Now we need to create our YUI instance and tell it to load the `color` and `slider` modules.

``` YUI().use('slider', 'color', function (Y) { // Code Here. }); ```

Building the UI

The first bit of YUI we need to implement is creating our slider instances. We set the initial value of the sliders to a random position between `0` and `255`.

We follow that up by assigning nodes to variables. This helps prevent multiple look ups of the same node as we move the sliders.

Next we render our slider instances into their containers.

``` {{>rgb-slider-build-js}} ```

Binding Events

After we have our UI built and ready, we need to bind events to the `slider` instances for R, G, and B values.

In each event callback we update the text value in the UI, then call `updateColors()` to update the color strings.

In `updateColors()` we get to see the use of `Y.Color`. We create `rgbStr` from an array of color values. We can then create the hex and hsl value strings with `toHex()` and `toHSL()` respectively.

``` {{>rgb-slider-bind-js}} ```

Start it up!

Now that we have our UI built and events bound, we need to do an initial update to the UI.

First we display the each `slider`'s current value. Next we update the color strings with `updateColors()`.

``` {{>rgb-slider-start-js}} ```

The Whole Example

Now let's see it all together!

``` {{>rgb-slider-source-html}} ```