Salve.
Ecco il mio codice:

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(){
		
	var firstObj = {
		'start': 50,
		'maxInc': 240
	};
	var secondObj = {
		'start': 20,
		'maxInc': 95
	};
	var thirdObj = {
		'start': 125,
		'maxInc': 255
	};
	
	$('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){
			$('upd1').setHTML(pos);
		}
	
	}).set(firstObj.start);
	
	/* Slider 2 */
	var mySlide2 = new Slider($('area2'), $('knob2'), {
		steps: 255,	
		offset: 0,
		onChange: function(pos){
			$('upd2').setHTML(pos);
		}
	
	}).set(secondObj.start);
	
	/* Slider 3 */
	var mySlide3 = new Slider($('area3'), $('knob3'), {
		steps: 255,	
		offset: 0,
		onChange: function(pos){
			$('upd3').setHTML(pos);
		}
	
	}).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>

</body>
</html>
e questo è il css incluso
codice:
 
#area1, #area2, #area3 {
	position: relative;
	height: 15px;
	width: 280px;
	background: #000;
}
 
#knob1, #knob2, #knob3 {
	position: absolute;
	height: 15px;
	width: 20px;
	background: #ff3300;
	cursor: pointer;
}
Lo script in questione è un mootools preso da qui:
http://demos111.mootools.net/Slider

Funziona tutto a dovere. Dovrei implementare dei controlli sulle slide e non so come fare qualcuno saprebbe aiutarmi?

Il problema è questo.
Ho tre barre (slide) che vanno da 0 a 255.
Dovrei impostare un livello massimo per ogni barra (vedi proprietà maxInc) e bloccare ogni barra a superare sia il suo valore maxInc e sia inibire la discesa sotto il valore minimo di partenza start.

Inoltre, dovrei inserire un valore massimo di incremento globale (esempio 50) oltre il quale, non è possibile aumentare le tre barre assieme. In questo caso le tre barre complessivamente potranno muoversi in avanti complessivamente per 50 punti.