nemtsov/HexColorSliders

## HexColorSliders
<html>
<head>
<style>
#c {
  padding: 200px;
  margin: 10px;
  border: 1px solid #777777;
}
#num span {
  font-size: 180%;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />
</head>
<body class="claro">

<div id="c">
</div>

<div id="num">
<span id="h">#</span>
<span id="r">00</span>
<span id="g">00</span>
<span id="b">00</span>
</div>
&nbsp;
<div id="slider1" class="slider"></div>
&nbsp;
<div id="slider2" class="slider"></div>
&nbsp;
<div id="slider3" class="slider"></div>
&nbsp;


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
<script type="text/javascript">
    dojo.require("dijit.form.Slider");
    dojo.require("dijit.form.TextBox"); // this we only include to make the textinput look prettier
dojo.addOnLoad(function() {
//-----------
var sr = dojo.byId("r"),
    sg = dojo.byId("g"),
    sb = dojo.byId("b");

var sc = dojo.byId("c");

var a,b,c;
a=b=c="00";

var updateHex = function(i, v) {
  var pad = function(p) {
   return (p.length==1) ? "0"+p : p;
  };

  if (i==1) {
    a=pad(Math.floor(v).toString(16));
  }

  if (i==2) {
    b=pad(Math.floor(v).toString(16));
  }

  if (i==3) {
    c=pad(Math.floor(v).toString(16));
  }

  realUpdate();
};

var realUpdate = function() {
  sr.innerHTML=a;
  sg.innerHTML=b;
  sb.innerHTML=c;

  sc.style.backgroundColor="#"+a+b+c;
};

      for (var i = 0; i <= 3; i++) {
        (function(i) {
         var slider = new dijit.form.HorizontalSlider({
            name: "slider",
            value: 0,
            minimum: 0,
            maximum: 255,
            intermediateChanges: true,
            style: "width:300px;",
            onChange: function(value) {
              updateHex(i, value);
            }
         },
         "slider"+i);
        }(i));
      }
//-----------
});
</script>
</body>
</html>
	<html>
	<head>
	<style>
	#c {
	padding: 200px;
	margin: 10px;
	border: 1px solid #777777;
	}
	#num span {
	font-size: 180%;
	}
	</style>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />
	</head>
	<body class="claro">

	<div id="c">
	</div>

	<div id="num">
	<span id="h">#</span>
	<span id="r">00</span>
	<span id="g">00</span>
	<span id="b">00</span>
	</div>

	<div id="slider1" class="slider"></div>

	<div id="slider2" class="slider"></div>

	<div id="slider3" class="slider"></div>



	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
	<script type="text/javascript">
	dojo.require("dijit.form.Slider");
	dojo.require("dijit.form.TextBox"); // this we only include to make the textinput look prettier
	dojo.addOnLoad(function() {
	//-----------
	var sr = dojo.byId("r"),
	sg = dojo.byId("g"),
	sb = dojo.byId("b");

	var sc = dojo.byId("c");

	var a,b,c;
	a=b=c="00";

	var updateHex = function(i, v) {
	var pad = function(p) {
	return (p.length==1) ? "0"+p : p;
	};

	if (i==1) {
	a=pad(Math.floor(v).toString(16));
	}

	if (i==2) {
	b=pad(Math.floor(v).toString(16));
	}

	if (i==3) {
	c=pad(Math.floor(v).toString(16));
	}

	realUpdate();
	};

	var realUpdate = function() {
	sr.innerHTML=a;
	sg.innerHTML=b;
	sb.innerHTML=c;

	sc.style.backgroundColor="#"+a+b+c;
	};

	for (var i = 0; i <= 3; i++) {
	(function(i) {
	var slider = new dijit.form.HorizontalSlider({
	name: "slider",
	value: 0,
	minimum: 0,
	maximum: 255,
	intermediateChanges: true,
	style: "width:300px;",
	onChange: function(value) {
	updateHex(i, value);
	}
	},
	"slider"+i);
	}(i));
	}
	//-----------
	});
	</script>
	</body>
	</html>