text: <HTML><HEAD>
  	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
      <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
      <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
      <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
      <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
      <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
      <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  	<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
  </HEAD><BODY BGCOLOR='powderblue' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
  <TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  
  	Slider color mixer example
  
  </TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  
  	Isomorphic SmartClient SDK
  
  </TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
  <TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>
  
  
  <!--------------------------
    Example code starts here
  ---------------------------->
  
  <SCRIPT>
  
  function num2hex(num) {
  	var lowWord = num%16,
  		highWord = (num-lowWord)/16;
  	return num2hexdigit(highWord)+""+num2hexdigit(lowWord);
  }
  
  function num2hexdigit(num) {
  	if (num == 10) return "A";
  	else if (num == 11) return "B";
  	else if (num == 12) return "C";
  	else if (num == 13) return "D";
  	else if (num == 14) return "E";
  	else if (num == 15) return "F";
  	else return ""+num;
  }
  
  var colorBox = Canvas.newInstance({
  	left:400,
  	top:115,
  	width:200,
  	height:200,
  	red:"77",
  	green:"77",
  	blue:"77",
  	backgroundColor:"777777",
  	sliderMove:function(event,slider){
  		var newColor = num2hex(Math.round(slider.value));
  		if (slider.ID == "sliderRed") this.red = newColor;
  		else if (slider.ID == "sliderGreen") this.green = newColor;
  		else if (slider.ID == "sliderBlue") this.blue = newColor;
  		this.setBackgroundColor(this.red+""+this.green+""+this.blue);
  		return false;
  	}
  });
  
  Slider.newInstance({
  	ID:"sliderRed",
  	title:"Red",
  	left:60,
  	top:90,
  	sliderTarget:colorBox,
  	value:128,
  	minValue:0,
  	maxValue:255
  });
  
  
  Slider.newInstance({
  	ID:"sliderGreen",
  	title:"Green",
  	left:155,
  	top:90,
  	//sliderTarget:colorBox,
  	value:128,
  	minValue:0,
  	maxValue:255
  });
  
  
  Slider.newInstance({
  	ID:"sliderBlue",
  	title:"Blue",
  	left:250,
  	top:90,
  	//sliderTarget:colorBox,
  	value:128,
  	minValue:0,
  	maxValue:255
  });
  
  
  Slider.newInstance({
  	ID:"sliderSize",
  	title:"Size",
  	left:350,
  	top:330,
  	vertical:false,
  	value:200,
  	minValue:20,
  	minValueLabel:"Small",
  	maxValue:200,
  	maxValueLabel:"Big",
  	numValues:10
  });
  
  
  //colorBox.observe(sliderRed, "valueChanged", "observer.sliderMove(null,observed)");
  colorBox.observe(sliderGreen, "valueChanged", "observer.sliderMove(null,observed)");
  colorBox.observe(sliderBlue, "valueChanged", "observer.sliderMove(null,observed)");
  colorBox.observe(sliderSize, "valueChanged", "observer.resizeTo(observed.value,observed.value)");
  
  </SCRIPT>
  </BODY>
  </HTML>