Jump to Table of Contents

Example: RGB Slider

Use three sliders to control RGB values and update Hex and HSL strings.

R:
G:
B:
Hex:
RGB:
HSL:

Setting Up the Sliders

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

<div class="sliders yui3-skin-sam">
    <dl>
        <dt>R: <span id="r-val" class="val"></span></dt><dd id="r-slider"></dd>
        <dt>G: <span id="g-val" class="val"></span></dt><dd id="g-slider"></dd>
        <dt>B: <span id="b-val" class="val"></span></dt><dd id="b-slider"></dd>
    </dl>
</div>
<div class="color"></div>
<div class="output">
    <dl>
        <dt>Hex:</dt><dd id="hex"></dd>
        <dt>RGB:</dt><dd id="rgb"></dd>
        <dt>HSL:</dt><dd id="hsl"></dd>
    </dl>
</div>

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

.sliders {
    display: inline-block;
    zoom: 1; *display: inline;
    width: 210px;
    vertical-align: middle;
    overflow: hidden;
}
.color {
    display: inline-block;
    zoom:1; *display: inline;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
    margin: 0 20px;
    vertical-align: middle;
}
.output {
    display: inline-block;
    zoom: 1; *display: inline;
    vertical-align: middle;
    overflow: hidden;
}
.sliders dt,
.output dt {
    float: left;
    clear: left;
    width: 50px;
    height: 40px;
    line-height: 40px;
}
.sliders dd,
.output dd {
    float: left;
    height: 40px;
    line-height: 40px;
    margin: 0;
}

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.

// sliders
var rSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),
    gSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),
    bSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

    // slider values
    rVal = Y.one('#r-val'),
    gVal = Y.one('#g-val'),
    bVal = Y.one('#b-val'),

    // color strings
    hex = Y.one('#hex'),
    rgb = Y.one('#rgb'),
    hsl = Y.one('#hsl'),

    // color chip
    color = Y.one('.color');

// render sliders
rSlider.render('#r-slider');
gSlider.render('#g-slider');
bSlider.render('#b-slider');

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.

// register update events
rSlider.after('thumbMove', function(e) {
    rVal.set('text', rSlider.get('value'));
    updateColors();
});
gSlider.after('thumbMove', function(e) {
    gVal.set('text', gSlider.get('value'));
    updateColors();
});
bSlider.after('thumbMove', function(e) {
    bVal.set('text', bSlider.get('value'));
    updateColors();
});

// update the colors strings
function updateColors() {
    var r = rSlider.get('value'),
        g = gSlider.get('value'),
        b = bSlider.get('value'),
        rgbStr = Y.Color.fromArray([r,g,b], Y.Color.TYPES.RGB);

    color.setStyle('backgroundColor', rgbStr);

    rgb.set('text', rgbStr);

    hex.set('text', Y.Color.toHex(rgbStr));
    hsl.set('text', Y.Color.toHSL(rgbStr));
}

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().

rVal.set('text', rSlider.get('value'));
gVal.set('text', gSlider.get('value'));
bVal.set('text', bSlider.get('value'));
updateColors();

The Whole Example

Now let's see it all together!

<!DOCTYPE html>
<html>
    <head>
        <style>
        .sliders {
    display: inline-block;
    zoom: 1; *display: inline;
    width: 210px;
    vertical-align: middle;
    overflow: hidden;
}
.color {
    display: inline-block;
    zoom:1; *display: inline;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
    margin: 0 20px;
    vertical-align: middle;
}
.output {
    display: inline-block;
    zoom: 1; *display: inline;
    vertical-align: middle;
    overflow: hidden;
}
.sliders dt,
.output dt {
    float: left;
    clear: left;
    width: 50px;
    height: 40px;
    line-height: 40px;
}
.sliders dd,
.output dd {
    float: left;
    height: 40px;
    line-height: 40px;
    margin: 0;
}

        </style>
    </head>
    <body>
        <div class="sliders yui3-skin-sam">
    <dl>
        <dt>R: <span id="r-val" class="val"></span></dt><dd id="r-slider"></dd>
        <dt>G: <span id="g-val" class="val"></span></dt><dd id="g-slider"></dd>
        <dt>B: <span id="b-val" class="val"></span></dt><dd id="b-slider"></dd>
    </dl>
</div>
<div class="color"></div>
<div class="output">
    <dl>
        <dt>Hex:</dt><dd id="hex"></dd>
        <dt>RGB:</dt><dd id="rgb"></dd>
        <dt>HSL:</dt><dd id="hsl"></dd>
    </dl>
</div>
        <script>
            YUI().use('slider', 'color', function(Y){
                // sliders
    var rSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),
        gSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),
        bSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        // slider values
        rVal = Y.one('#r-val'),
        gVal = Y.one('#g-val'),
        bVal = Y.one('#b-val'),

        // color strings
        hex = Y.one('#hex'),
        rgb = Y.one('#rgb'),
        hsl = Y.one('#hsl'),

        // color chip
        color = Y.one('.color');

    // render sliders
    rSlider.render('#r-slider');
    gSlider.render('#g-slider');
    bSlider.render('#b-slider');


                // register update events
    rSlider.after('thumbMove', function(e) {
        rVal.set('text', rSlider.get('value'));
        updateColors();
    });
    gSlider.after('thumbMove', function(e) {
        gVal.set('text', gSlider.get('value'));
        updateColors();
    });
    bSlider.after('thumbMove', function(e) {
        bVal.set('text', bSlider.get('value'));
        updateColors();
    });

    // update the colors strings
    function updateColors() {
        var r = rSlider.get('value'),
            g = gSlider.get('value'),
            b = bSlider.get('value'),
            rgbStr = Y.Color.fromArray([r,g,b], Y.Color.TYPES.RGB);

        color.setStyle('backgroundColor', rgbStr);

        rgb.set('text', rgbStr);

        hex.set('text', Y.Color.toHex(rgbStr));
        hsl.set('text', Y.Color.toHSL(rgbStr));
    }


            
    rVal.set('text', rSlider.get('value'));
    gVal.set('text', gSlider.get('value'));
    bVal.set('text', bSlider.get('value'));
    updateColors();

            });
        </script>
    </body>
</html>

Examples