YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Slider Control: RBG Slider Control

# Slider Control: RBG Slider Control

The RGB slider implements the YUI Slider Control to create three sliders which, between them, generate an RGB color. The background color of each slider is also dynamically modified to reflect the colors that could be generated by moving a single slider; this affords greater visual feedback to the user and allows her to have a quicker intuitive sense about how to get the desired result.

(Note: YUI also includes a full Color Picker Control with a complete set of configurable options.)

View example in new window.

####

RGB |  |
Hex: # |  |

## Advanced Solution: RGB Control

CSS:

<style type="text/css"> .dragPanel { position: relative; background-color: #eeeeee; top: 0px; left: 20px; width: 320px; height: 180px; } .dragPanel h4 { background-color: #bbbbbb; height: 10px; margin: 0px; cursor: move; } input { font-size: 85%} .thumb { cursor:default; width:18px; height:18px; z-index: 9; position: absolute; left: 0px; } .bg { position:absolute; left:10px; height:18px; width:146px; border: 0px solid #aaaaaa; } .bg span, .bg p { cursor:default; position: relative; font-size: 2px; overflow: hidden; color: #aaaaaa; top: 4px; height: 10px; width: 4px; display: block; float:left; } .bg span { border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; } .bg .lb { border-left:1px solid #cccccc; } .bg .rb { border-right:1px solid #cccccc; } #valdiv { position:absolute; top: 100px; left:10px; } #rBG {-moz-outline: none; outline:0px none;top:30px} #gBG {-moz-outline: none; outline:0px none;top:50px} #bBG {-moz-outline: none; outline:0px none;top:70px} #swatch { position:absolute; left:160px; top:34px; height:50px; width:50px; border:1px solid #aaaaaa; } </style>

Markup:

<div id="ddRGB" class="dragPanel"> <h4 id="pickerHandle"> </h4> <div id="rBG" class="bg" tabindex="1" hidefocus="true"> <div id="rthumb" class="thumb"><img src="assets/thumb-rgb.png" /></div> </div> <div id="gBG" class="bg" tabindex="2" hidefocus="true"> <div id="gthumb" class="thumb"><img src="assets/thumb-rgb.png" /></div> </div> <div id="bBG" class="bg" tabindex="3" hidefocus="true"> <div id="bthumb" class="thumb"><img src="assets/thumb-rgb.png" /></div> </div> <div id="valdiv"> <form name="rgbform"> <table border="0"> <tr> <td> RGB </td> <td> <input autocomplete="off" tabindex="3" name="rval" id="rval" type="text" value="0" size="4" maxlength="4" /> <input autocomplete="off" tabindex="4" name="gval" id="gval" type="text" value="0" size="4" maxlength="4" /> <input autocomplete="off" tabindex="5" name="bval" id="bval" type="text" value="0" size="4" maxlength="4" /> </td> <td> <input tabindex="6" id="rgbSubmit" type="button" value="Update" /> </td> </tr> <tr> <td> Hex: # </td> <td> <input autocomplete="off" tabindex="7" name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" /> </td> <td> <input tabindex="8" id="hexSubmit" type="button" value="Update" /> </td> </tr> <tr> <td> <input tabindex="9" id="resetButton" type="button" value="Reset" /> </td> </tr> </table> </form> </div> <div id="swatch"> </div> </div>

Code:

<!-- color.js extracted from the colorpicker widget --> <script type="text/javascript" src="assets/color.js"></script> <script type="text/javascript"> YAHOO.example.RGBSlider = function() { var Event = YAHOO.util.Event, Dom = YAHOO.util.Dom, Color = YAHOO.util.Color, Slider = YAHOO.widget.Slider, r, g, b, dd; function updateSliderColors() { var curr, curg, curb; curr = Math.min(r.getValue() * 2, 255); curg = Math.min(g.getValue() * 2, 255); curb = Math.min(b.getValue() * 2, 255); YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb); for (var i=0; i<34; i++) { Dom.setStyle("rBG" + i, "background-color", "rgb(" + (i*8) + "," + curg + "," + curb + ")"); Dom.setStyle("gBG" + i, "background-color", "rgb(" + curr + "," + (i*8) + "," + curb + ")"); Dom.setStyle("bBG" + i, "background-color", "rgb(" + curr + "," + curg + "," + (i*8) + ")"); } Dom.setStyle("swatch", "background-color", "rgb(" + curr + "," + curg + "," + curb + ")"); Dom.get("hexval").value = Color.rgb2hex(curr, curg, curb); } function isValidRGB(a) { if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false; if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false; if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false; return true; } function listenerUpdate(whichSlider, newVal) { newVal = Math.min(255, newVal); Dom.get(whichSlider + "val").value = newVal; updateSliderColors(); } return { userReset: function() { var v; var f = document.forms['rgbform']; r.setValue(0); g.setValue(0); b.setValue(0); }, rgbInit: function() { r = Slider.getHorizSlider("rBG", "rthumb", 0, 128); r.subscribe("change", function(newVal) { listenerUpdate("r", newVal*2); }); g = Slider.getHorizSlider("gBG", "gthumb", 0, 128); g.subscribe("change", function(newVal) { listenerUpdate("g", newVal*2); }); b = Slider.getHorizSlider("bBG", "bthumb", 0, 128); b.subscribe("change", function(newVal) { listenerUpdate("b", newVal*2); }); this.initColor(); dd = new YAHOO.util.DD("ddRGB"); dd.setHandleElId("pickerHandle"); }, initColor: function() { var ch = " "; d = document.createElement("P"); d.className = "rb"; r.getEl().appendChild(d); d = document.createElement("P"); d.className = "rb"; g.getEl().appendChild(d); d = document.createElement("P"); d.className = "rb"; b.getEl().appendChild(d); for (var i=0; i<34; i++) { d = document.createElement("SPAN"); d.id = "rBG" + i // d.innerHTML = ch; r.getEl().appendChild(d); d = document.createElement("SPAN"); d.id = "gBG" + i // d.innerHTML = ch; g.getEl().appendChild(d); d = document.createElement("SPAN"); d.id = "bBG" + i // d.innerHTML = ch; b.getEl().appendChild(d); } d = document.createElement("P"); d.className = "lb"; r.getEl().appendChild(d); d = document.createElement("P"); d.className = "lb"; g.getEl().appendChild(d); d = document.createElement("P"); d.className = "lb"; b.getEl().appendChild(d); this.userUpdate(); }, hexUpdate: function(e) { return this.userUpdate(e, true); }, userUpdate: function(e, isHex) { var v; var f = document.forms['rgbform']; if (isHex) { var hexval = f["hexval"].value; // shorthand #369 if (hexval.length == 3) { var newval = ""; for (var i=0;i<3;i++) { var a = hexval.substr(i, 1); newval += a + a; } hexval = newval; } YAHOO.log("hexval:" + hexval); if (hexval.length != 6) { alert("illegal hex code: " + hexval); } else { var rgb = Color.hex2rgb(hexval); // alert(rgb.toString()); if (isValidRGB(rgb)) { f['rval'].value = rgb[0]; f['gval'].value = rgb[1]; f['bval'].value = rgb[2]; } } } // red v = parseFloat(f['rval'].value); v = ( isNaN(v) ) ? 0 : Math.round(v); YAHOO.log("setValue, r: " + v); r.setValue(Math.round(v) / 2); v = parseFloat(f['gval'].value); v = ( isNaN(v) ) ? 0 : Math.round(v); YAHOO.log("setValue, g: " + g); g.setValue(Math.round(v) / 2); v = parseFloat(f['bval'].value); v = ( isNaN(v) ) ? 0 : Math.round(v); YAHOO.log("setValue, b: " + b); b.setValue(Math.round(v) / 2); updateSliderColors(); if (e) { Event.stopEvent(e); } }, init: function() { this.rgbInit(); Event.on("rgbForm", "submit", this.userUpdate); Event.on("rgbSubmit", "click", this.userUpdate); Event.on("hexSubmit", "click", this.hexUpdate, this, true); Event.on("resetButton", "click", this.userReset); } }; }(); YAHOO.util.Event.onDOMReady(YAHOO.example.RGBSlider.init, YAHOO.example.RGBSlider, true); </script>

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Slider Control Examples:

- Basic Vertical Slider
- Horizontal Slider with Tick Marks
- RBG Slider Control
- Bottom to top Vertical Slider
- Horizontal Slider with two thumbs
- Dual-thumb Slider with range highlight
- Slider Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager)

### More Slider Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings