Slider (Framework: MooTools)

HTML Quellcode

<div>
	<div id="red" class="slider advanced">
		<div class="knob">
		</div>
	</div>
	<div id="green" class="slider advanced">

		<div class="knob">
		</div>
	</div>
	<div id="blue" class="slider advanced">
		<div class="knob">
		</div>
	</div>
	<span class="b">Selected color: </span>

	<span id="setColor"></span>
</div>

CSS Quellcode

div.slider {
	width: 200px;
	height: 16px;
	background: #eee;
}
div.slider div.knob {
	background: #000;
	width: 16px;
	height: 16px;
}
div#fontSize {
	height: 50px;
}

div.advanced {
	width: 400px;
	margin: 5px 0;
	background: url(/fileadmin/mootools/slider.png) 0 center repeat-x;
}
div.advanced div.knob {
	background: no-repeat center center;
	cursor: pointer;
}
div#red div.knob {
	background-image: url(/fileadmin/mootools/red.png);
}
div#green div.knob {
	background-image: url(/fileadmin/mootools/green.png);
}
div#blue div.knob {
	background-image: url(/fileadmin/mootools/blue.png);
}

Javascript Quellcode

window.addEvent('domready', function(){

	var el = $('setColor'), color = [0, 0, 0];
	
	var updateColor = function(){
		el.setStyle('color', color).set('text', color.rgbToHex());
	};
	
	updateColor();
	
	$$('div.slider.advanced').each(function(el, i){
		var slider = new Slider(el, el.getElement('.knob'), {
			steps: 255,  
			wheel: true, 
			onChange: function(){
				color[i] = this.step;
				updateColor();
			}
		}).set(0);
	});
});