<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>slider</title>
<link href="slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slider.js"></script>
</head>
<body>
<?php
if(isset($_POST['submit']))
{
echo"$pos1 - $pos2<br>";
}
?>
<form name="rate" action="index.php" method="post">
<div id="container">
<div id="slideContainer1"><div id="slideHandle1"></div></div>
<div id="pos1"></div>
<div id="slideContainer2"><div id="slideHandle2"></div></div>
<div id="pos2"></div>
</div>
<script type="text/javascript">
window.addEvent('domready', function()
{
var slider1 = new Slider('slideContainer1', 'slideHandle1',{onComplete: function(val){$('pos1').setHTML(val);}});
var slider2 = new Slider('slideContainer2', 'slideHandle2',{
onTick: function(pos){
this.knob.effect(this.p, {duration: 200, transition: Fx.Transitions.quadOut}).start(pos);
},
onComplete: function(val){
$('pos2').setHTML(val);
},
steps: 5
});
});
</script>
</div>
<div align="center"><input type="submit" value="Send"></div>
</form>
</body>
</html>