<!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>