Вот у меня код для бегунка завалялся:
<div style="cursor: pointer; width: 500px; height: 5px; background: #eee; border: 1px dashed #555;" id="area"></div>
<div style="margin-left: 0px; width: 10px; height: 10px; cursor: pointer; position: absolute; background: #555; margin-top: -8px;" onmousedown="movestart(this);" id="x"></div>
<div id="counter">0</div>
<script type="text/javascript">
function movestart (el) {
document.onmousemove = function (ev) {
e = ev || window.event;
if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
}
if (e.pageX < 510) {el.style.marginLeft = document.getElementById('counter').innerHTML = e.pageX - 10;
}
}
document.onmouseup = function () {document.onmousemove = null};
}
document.getElementById('area').onclick = function (event) {
document.getElementById('x').style.marginLeft = document.getElementById('counter').innerHTML = event.pageX - 10;
}
</script>
Чтобы сделать цену, просто записывай в поле текущий pageX. В коде есть запись pageX в DIV, что почти одно и то же.
