Our Blog

Following my previous post about the slider, in this example I created a color picker with three sliders, red, green and blue. On the onChange event of these sliders, I'm updating the color of the rectangle to reflect the changes.

This is the code:

<cfsavecontent variable="onValueChange">
   
   function comp2Hex(val)
   {
       return (val<16) ? "0" + val.toString(16) : val.toString(16);
   }
   var red = Number(slideRed.text);
   var green = Number(slideGreen.text);
   var blue = Number(slideBlue.text);
   var rgb = red << 16 | green << 8 | blue;
   var c = Number("0x"+comp2Hex(rgb));
   colorDisplay.setStyle("backgroundColor", c);
</cfsavecontent>

<cfform name="myform" height="200" width="300" format="Flash" timeout="1000">
   <cfformgroup type="horizontal">
      <cf_slider name="slideRed" minValue="0" maxValue="255" onChange="#onValueChange#"
             showValues="false" thumStyle="cornerRadius:4; borderThickness:1;">

      <cfinput name="trace" type="text" width="40" bind="{slideRed.text}"/>
   </cfformgroup>
   <cfformgroup type="horizontal">
      <cf_slider name="slideGreen" minValue="0" maxValue="255" onChange="#onValueChange#"
             showValues="false" thumStyle="cornerRadius:4; borderThickness:1;">

      <cfinput name="trace1" type="text" width="40" bind="{slideGreen.text}"/>
   </cfformgroup>
   <cfformgroup type="horizontal">
      <cf_slider name="slideBlue" minValue="0" maxValue="255" onChange="#onValueChange#"
             showValues="false" thumStyle="cornerRadius:4; borderThickness:1;">

      <cfinput name="trace2" type="text" width="40" bind="{slideBlue.text}"/>
   </cfformgroup>
   <cfinput type="text" name="colorDisplay" disabled="true"
          style="borderStyle:none; backgroundColor:##ffffff">

</cfform>

You can view a live example
Download the source.

Nahuel Foronda

Nahuel Foronda

6 Comments

  1. phill.nacelli

    DITTO.... DITTO... You guys absolutely rock!!! Thank You! Thank You! Thank You!...
  2. Mathij
    wow this rocks! what i'm also looking for is a color picker from predefined Hex colors. I that also possible with flash and cfform?
  3. Steven Ross
    when i browse this it loads the thumbnails then they dissapear... I am about to start using this code and just wondered if anyone else is seeing this.
  4. Michael White
    only one thing more would make it perfect. If you had a second box with the HEX values next to the first box that that was bound to the first and calculated on the fly. Can you have a calculated control bound to a control that is itself bound to a third control (slider in this case)?
  5. Michael White
    I see why you didn't include that function... I am surprised how hard it is to find the formula to convert from decimal to hex and coldfusion doesn't seem to have a built in function exposed.