Hmm... non riesco proprio ad andare oltre..
Sono riuscito a far scrivere da una parte il valore totale degli incrementi, ma non riesco a farci i controlli e a far stoppare le barre. (vedi codice commentato)
Non sono molto pratico di ajax ... qualcuno saprebbe aiutarmi?

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>.</title>
	<link rel="stylesheet" type="text/css" media="screen" href="cssCode.css" />
	<script type="text/javascript" src="mootools.svn.js"></script>
	<script type="text/javascript">
window.addEvent('domready', function(){
	
	// oggetti
	var firstObj = {
		'start': 50,
		'current': 50,
		'maxInc': 90
	};
	var secondObj = {
		'start': 20,
		'current': 20,
		'maxInc': 95
	};
	var thirdObj = {
		'start': 125,
		'current': 125,
		'maxInc': 255
	};
	
	var total = 30;
	
	$('knob1').setOpacity(0.5);
	$('knob2').setOpacity(0.5);
	$('knob3').setOpacity(0.5);
	
	/* Slider 1 */
	var mySlide1 = new Slider($('area1'), $('knob1'), {
		steps: 255,	
		offset: 0,
		onChange: function(pos){
			//if( pos >= firstObj.start || pos <= firstObj.maxInc ){
			$('upd1').setHTML(pos);
			firstObj.current = parseInt( pos );
			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - secondObj.current - thirdObj.current );
		}
	
	}).set(firstObj.start);
	
	/* Slider 2 */
	var mySlide2 = new Slider($('area2'), $('knob2'), {
		steps: 255,	
		offset: 0,
		onChange: function(pos){
			$('upd2').setHTML(pos);
			secondObj.current = parseInt( pos );
			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - firstObj.current - thirdObj.current );
		}
	
	}).set(secondObj.start);
	
	/* Slider 3 */
	var mySlide3 = new Slider($('area3'), $('knob3'), {
		steps: 255,	
		offset: 0,
		onChange: function(pos){
			$('upd3').setHTML(pos);
			thirdObj.current = parseInt( pos );
			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - firstObj.current - secondObj.current );
		}
	
	}).set(thirdObj.start);

}); 
</script>
	
</head>

<body>

<h3>Slider 1</h3>
<div id="area1">
	<div id="knob1"></div>
</div>
<p id="upd1">XX</p>

<h3>Slider 2</h3>
<div id="area2">
	<div id="knob2"></div>
</div>
<p id="upd2">XX</p>

<h3>Slider 3</h3>
<div id="area3">
  <div id="knob3"></div>
</div>
<p id="upd3">XX</p>

<p id="total" style="color:red;">XX</p>

</body>
</html>