h1rurg911,
для медитации ... вместо colorpicker ползунок ... кликаем на любой 'квадратик', на ползунок, на кнопку 'add'
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#plus {
color: #000080;
background: #E9985D;
border-radius: 8px;
display: inline-block;
margin: 5px;}
#mas div {
text-align: center;
width: 24px;
cursor: default;
border-radius: 4px;
display: inline-block;
margin: 8px;
padding: 4px;
color:#FFFF00;
background: #FFA500;
opacity: 0;
-moz-transition: all 1.5s;
-o-transition: all 1.5s;
-webkit-transition: all 1.5s;
transition: all 1.5s;
}
body{
background: #7B68EE;
font-size: 24px;
}
</style>
</head>
<body>
<div id="mas"></div>
<input type="button" id = 'plus' value="add" />
<input type='range' id = 'rang' value = 70 />
<script>
var index;
var rng = document.querySelector('#rang');
var mas = document.querySelector('#mas');
var pls = document.querySelector('#plus');
rng.onchange = color;
pls.onclick = add;
function color() {
index && (index.innerHTML = this.value)
}
function init() {
index && (index.style.backgroundColor = '');
this.style.backgroundColor = '#0000CD';
rng.value = this.innerHTML;
index = this
}
function add() {
var d = document.createElement("div");
d.onclick = init;
var a = Math.floor(Math.random() * 100);
d.innerHTML = a;
mas.appendChild(d);
d.onclick();
d.clientWidth;
d.style.opacity = 1;
};
add();
add();
</script>
</body>
</html>