YUI Library Home

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:

1<style type="text/css"> 
2    .dragPanel { position: relative; background-color: #eeeeee; top: 0px; left: 20px; width: 320px; height: 180px; } 
3    .dragPanel h4 { background-color: #bbbbbb; height: 10px; margin: 0px; cursor: move; } 
4    input { font-size: 85%} .thumb { cursor:default; width:18px; height:18px; z-index: 9; position: absolute; left: 0px; } 
5    .bg { position:absolute; left:10px; height:18px; width:146px; border: 0px solid #aaaaaa; }  
6    .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; } 
7    .bg span { border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; } 
8    .bg .lb { border-left:1px solid #cccccc; } 
9    .bg .rb { border-right:1px solid #cccccc; } 
10    #valdiv { position:absolute; top: 100px; left:10px; }  
11    #rBG {-moz-outline: none; outline:0px none;top:30px} 
12    #gBG {-moz-outline: none; outline:0px none;top:50px} 
13    #bBG {-moz-outline: none; outline:0px none;top:70px} 
14    #swatch { position:absolute; left:160px; top:34px; height:50px; width:50px; border:1px solid #aaaaaa; } 
15</style> 
view plain | print | ?

Markup:

1<div id="ddRGB" class="dragPanel"> 
2  <h4 id="pickerHandle"> </h4> 
3  <div id="rBG" class="bg" tabindex="1" hidefocus="true"> 
4    <div id="rthumb" class="thumb"><img src="assets/thumb-rgb.png" /></div>  
5  </div>  
6 
7  <div id="gBG" class="bg" tabindex="2" hidefocus="true"> 
8    <div id="gthumb" class="thumb"><img src="assets/thumb-rgb.png" /></div>  
9  </div>  
10 
11  <div id="bBG" class="bg" tabindex="3" hidefocus="true"> 
12    <div id="bthumb" class="thumb"><img src="assets/thumb-rgb.png" /></div>  
13  </div>  
14 
15  <div id="valdiv"> 
16    <form name="rgbform"> 
17      <table border="0"> 
18        <tr> 
19          <td> 
20          RGB 
21          </td> 
22          <td> 
23            <input autocomplete="off" tabindex="3" name="rval" id="rval" type="text" value="0" size="4" maxlength="4" /> 
24            <input autocomplete="off" tabindex="4" name="gval" id="gval" type="text" value="0" size="4" maxlength="4" /> 
25            <input autocomplete="off" tabindex="5" name="bval" id="bval" type="text" value="0" size="4" maxlength="4" /> 
26          </td> 
27          <td> 
28            <input tabindex="6" id="rgbSubmit" type="button" value="Update"  /> 
29          </td> 
30        </tr> 
31        <tr> 
32          <td> 
33            Hex: # 
34          </td> 
35          <td> 
36            <input autocomplete="off" tabindex="7" name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" /> 
37          </td> 
38          <td> 
39            <input tabindex="8" id="hexSubmit" type="button" value="Update" /> 
40          </td> 
41        </tr> 
42        <tr> 
43          <td> 
44            <input tabindex="9" id="resetButton" type="button" value="Reset" /> 
45          </td> 
46        </tr> 
47      </table> 
48    </form> 
49  </div> 
50 
51    <div id="swatch"> </div> 
52</div> 
view plain | print | ?

Code:

1<!-- color.js extracted from the colorpicker widget --> 
2<script type="text/javascript" src="assets/color.js"></script> 
3 
4<script type="text/javascript"> 
5 
6YAHOO.example.RGBSlider = function() { 
7 
8    var Event = YAHOO.util.Event, 
9        Dom = YAHOO.util.Dom, 
10        Color = YAHOO.util.Color, 
11        Slider = YAHOO.widget.Slider, 
12        r, g, b, dd; 
13 
14    function updateSliderColors() { 
15 
16        var curr, curg, curb; 
17 
18        curr = Math.min(r.getValue() * 2, 255); 
19        curg = Math.min(g.getValue() * 2, 255); 
20        curb = Math.min(b.getValue() * 2, 255); 
21 
22        YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb); 
23 
24        for (var i=0; i<34; i++) { 
25            Dom.setStyle("rBG" + i, "background-color",  
26                "rgb(" + (i*8) + "," + curg + "," + curb + ")"); 
27 
28            Dom.setStyle("gBG" + i, "background-color",  
29                "rgb(" + curr + "," + (i*8) + "," + curb + ")"); 
30 
31            Dom.setStyle("bBG" + i, "background-color",  
32                "rgb(" + curr + "," + curg + "," + (i*8) + ")"); 
33        } 
34 
35        Dom.setStyle("swatch", "background-color",  
36            "rgb(" + curr + "," + curg + "," + curb + ")"); 
37 
38        Dom.get("hexval").value = Color.rgb2hex(curr, curg, curb); 
39    } 
40 
41    function isValidRGB(a) {  
42        if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false; 
43        if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false; 
44        if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false; 
45 
46        return true; 
47    } 
48 
49    function listenerUpdate(whichSlider, newVal) { 
50        newVal = Math.min(255, newVal); 
51        Dom.get(whichSlider + "val").value = newVal; 
52        updateSliderColors(); 
53    } 
54 
55    return { 
56 
57        userReset: function() { 
58            var v; 
59            var f = document.forms['rgbform']; 
60 
61            r.setValue(0); 
62            g.setValue(0); 
63            b.setValue(0); 
64        }, 
65 
66        rgbInit: function() { 
67 
68            r = Slider.getHorizSlider("rBG", "rthumb", 0, 128); 
69            r.subscribe("change", function(newVal) { listenerUpdate("r", newVal*2); }); 
70 
71            g = Slider.getHorizSlider("gBG", "gthumb", 0, 128); 
72            g.subscribe("change", function(newVal) { listenerUpdate("g", newVal*2); }); 
73 
74            b = Slider.getHorizSlider("bBG", "bthumb", 0, 128); 
75            b.subscribe("change", function(newVal) { listenerUpdate("b", newVal*2); }); 
76 
77            this.initColor(); 
78 
79            dd = new YAHOO.util.DD("ddRGB"); 
80            dd.setHandleElId("pickerHandle"); 
81        }, 
82 
83        initColor: function() { 
84            var ch = " "; 
85 
86            d = document.createElement("P"); 
87            d.className = "rb"; 
88            r.getEl().appendChild(d); 
89            d = document.createElement("P"); 
90            d.className = "rb"; 
91            g.getEl().appendChild(d); 
92            d = document.createElement("P"); 
93            d.className = "rb"; 
94            b.getEl().appendChild(d); 
95 
96            for (var i=0; i<34; i++) { 
97                d = document.createElement("SPAN"); 
98                d.id = "rBG" + i 
99                // d.innerHTML = ch; 
100                r.getEl().appendChild(d); 
101 
102                d = document.createElement("SPAN"); 
103                d.id = "gBG" + i 
104                // d.innerHTML = ch; 
105                g.getEl().appendChild(d); 
106 
107                d = document.createElement("SPAN"); 
108                d.id = "bBG" + i 
109                // d.innerHTML = ch; 
110                b.getEl().appendChild(d); 
111            } 
112 
113            d = document.createElement("P"); 
114            d.className = "lb"; 
115            r.getEl().appendChild(d); 
116            d = document.createElement("P"); 
117            d.className = "lb"; 
118            g.getEl().appendChild(d); 
119            d = document.createElement("P"); 
120            d.className = "lb"; 
121            b.getEl().appendChild(d); 
122 
123            this.userUpdate(); 
124        }, 
125 
126        hexUpdate: function(e) { 
127            return this.userUpdate(e, true); 
128        }, 
129 
130        userUpdate: function(e, isHex) { 
131            var v; 
132            var f = document.forms['rgbform']; 
133 
134            if (isHex) { 
135                var hexval = f["hexval"].value; 
136                // shorthand #369 
137                if (hexval.length == 3) { 
138                    var newval = ""; 
139                    for (var i=0;i<3;i++) { 
140                        var a = hexval.substr(i, 1); 
141                        newval += a + a; 
142                    } 
143 
144                    hexval = newval; 
145                } 
146 
147                YAHOO.log("hexval:" + hexval); 
148 
149                if (hexval.length != 6) { 
150                    alert("illegal hex code: " + hexval); 
151                } else { 
152                    var rgb = Color.hex2rgb(hexval); 
153                    // alert(rgb.toString()); 
154                    if (isValidRGB(rgb)) { 
155                        f['rval'].value = rgb[0]; 
156                        f['gval'].value = rgb[1]; 
157                        f['bval'].value = rgb[2]; 
158                    } 
159                } 
160            } 
161 
162            // red 
163            v = parseFloat(f['rval'].value); 
164            v = ( isNaN(v) ) ? 0 : Math.round(v); 
165            YAHOO.log("setValue, r: " + v); 
166            r.setValue(Math.round(v) / 2); 
167 
168            v = parseFloat(f['gval'].value); 
169            v = ( isNaN(v) ) ? 0 : Math.round(v); 
170            YAHOO.log("setValue, g: " + g); 
171            g.setValue(Math.round(v) / 2); 
172 
173            v = parseFloat(f['bval'].value); 
174            v = ( isNaN(v) ) ? 0 : Math.round(v); 
175            YAHOO.log("setValue, b: " + b); 
176            b.setValue(Math.round(v) / 2); 
177 
178            updateSliderColors(); 
179 
180            if (e) { 
181                Event.stopEvent(e); 
182            } 
183        }, 
184 
185        init: function() { 
186            this.rgbInit(); 
187            Event.on("rgbForm", "submit", this.userUpdate); 
188            Event.on("rgbSubmit", "click", this.userUpdate); 
189            Event.on("hexSubmit", "click", this.hexUpdate, this, true); 
190            Event.on("resetButton", "click", this.userReset); 
191        } 
192    }; 
193}(); 
194 
195YAHOO.util.Event.onDOMReady(YAHOO.example.RGBSlider.init,  
196                            YAHOO.example.RGBSlider, true); 
197 
198</script> 
view plain | print | ?

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:

Logger Console

INFO 0ms (+0) 12:37:53 AM:
global
Logger initialized

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

Reload with logging
and debugging disabled.

More Slider Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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