In the previous article for sample code of AJAX Slider Control we discussed about the onchange client side event. When page_load event is being executed during the ASP.Net web page life cycle it adds onchange event to the target Textbox controls of slider extender controls. Here we will learn how to code for a javascript function to convert the decimal to hex code, so that we could generate hexadecimal color like #C0C0C0.

JavaScript Code to Convert Decimal to Hex

var hexArray = new Array( "0", "1", "2", "3",
                          "4", "5", "6", "7",
                          "8", "9", "A", "B",
                          "C", "D","E","F" );

 

var code1 = Math.floor(dec / 16);
var code2 = dec - code1 * 16;

 

var decToHex = hexArray[code1];
decToHex += hexArray[code2];

 

return (decToHex);

}

Above javascript function converts the decimal value into hexadecimal code for each value passed for the three slider extender controls to get the separate hex values for red, green and blue color.

toHex function as shown in the above javascript code is called by another javascript function setColor that sets the background color of Panel control using the combination of three hex values of red, green and blue color codes.

var slider1 = $get('<%= this.slider1.ClientID %>');
var redColor = slider1.value;//.getAttribute('value');

var slider2 = $get('<%= this.slider2.ClientID %>');
var greenColor = slider2.value;//.getAttribute('value');

var slider3 = $get('<%= this.slider3.ClientID %>');
var blueColor = slider3.value;//.getAttribute('value');

var panel = $get('<%= this.Panel1.ClientID %>');
var hexColor = toHex(redColor) + toHex(greenColor) + toHex(blueColor);

panel.style.backgroundColor = '#' + hexColor;

var hexCode = $get('<%= this.txtHexCode.ClientID %>');
hexCode.value = '#' + hexColor;

}

Above javascript function gets the value of attached textboxes of slider extender controls used in the sample of AJAX slider control. Then combined result of red, green and blue color is generated by using:

var hexColor = toHex(redColor) + toHex(greenColor) + toHex(blueColor);

Further hexColor is used as a background color of Panel control.

You can download the free source code for the above AJAX slider extender control to create your own color mixer using javascript function that converts decimal to hex...

ajax slider control.zip (1.78 kb)