накидал, но криво работает, мне надо было с нуля))
но принцип примерно такой.. и там верстку немного бы переделать
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8" />
<title>Полоса</title>
</head>
<body>
<style>
#beg {
}
#polosa {
border: 1px solid #FFFFFF;
height: 5px;
margin: 0 auto;
position: relative;
top: 10px;
width: 150px;
}
#block {
background: none repeat scroll 0 0 #CCCCCC;
height: 50px;
width: 200px;
}
#znach {
left: 25px;
position: relative;
}
</style>
<div id="block">
<div id="polosa"></div>
<div id="beg" style="background: none repeat scroll 0 0 #FFFFFF;
height: 20px;
left: 24px;
position: relative;
width: 5px;
cursor: pointer;" onmousedown="begun(this);"></div>
<div id="znach" >0</div>
</div>
<script>
var left = -1;
var click_x = -1;
function begun(el)
{
var event = event || window.event;
left = parseInt(el.style.left);
click_x = event.layerX;
window.onmousemove = function(event)
{
var event = event || window.event;
console.log(':' + (left) + ':' + (event.layerX - click_x))
el.style.left = left + event.layerX - click_x + 'px';
}
window.onmouseup = function(event)
{
window.onmousemove = undefined;
}
}
</script>
</body>
</html>