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>

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### 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
- Basic Features (included with examples for ProgressBar Control)
- Events (included with examples for ProgressBar Control)
- 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 © 2009 Yahoo! Inc. All rights reserved.

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