<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#bar{
width:200px;
height:25px;
border:1px solid black;
position:relative;
}
#slider{
width:0%;
height:100%;
background-color:red;
top:0px;
left:0px;
position:absolute;
cursor:pointer;
}
#info{
width:200px;
height:25px;
border:1px solid black;
}
</style>
<script type="text/javascript">
var bar, slider;
function init(){
bar = document.getElementById('bar');
slider = document.getElementById('slider');
info = document.getElementById('info');
bar.addEventListener('mousedown', startSlide, false);
bar.addEventListener('mouseup', stopSlide, false);
}
function startSlide(event){
var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
info.innerHTML = 'start' + set_perc + '%';
bar.addEventListener('mousemove', moveSlide, false);
slider.style.width = (set_perc * 100) + '%';
}
function moveSlide(event){
var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
info.innerHTML = 'moving : ' + set_perc + '%';
slider.style.width = (set_perc * 100) + '%';
}
function stopSlide(event){
var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
info.innerHTML = 'done : ' + set_perc + '%';
bar.removeEventListener('mousemove', moveSlide, false);
slider.style.width = (set_perc * 100) + '%';
}
</script>
</head>
<body onload='init()'>
<div id='bar'>
<div id='slider'>
</div>
</div>
<br />
<div id='info'>info</div>
</body>
</html>