Ползунок мышью
 

Появилась неоходимость создать некий ползунок который можно двигать мышью при этом в определенном поле после расчетов будет отображаться соответствующие данные.

К примеру как на рисунке при движении ползунка от 30 000 до 500 000 у нас вычесляется момент смещения и высвечивается подходящая сумма, также обратное действие при вводе в поле числа происходит вычисление и ползунок смещается на нужное количество пикселей.

Вопрос заключается именно в возможности перемещения данного ползунка в рамках заданной линии с помощью мышки.
Если есть уже подобные решения то просьба направить на них если нет то помочь реализовать его

Заранее все спасибо.

Не судите строго т.к. пишу как новичек :)

<div id="sum">30000</div>
<input type="range" min="30000" max="500000" value="30000" onchange="document.getElementById('sum').innerHTML=this.value;" />

не работает в IE7-8-9

и фф

спс за ответы хотя и не результативные так как должно было работать во всех браузерах :)
видно я плохо умею искать нашел в учебнике статью про слайдеры и там некую разработку http://learn.javascript.ru/play/oAHOzb которая вполне подходит под мои запросы так что думаю тему можно закрыть :yes:

и вообще только в хроме, могу ошибаться, но по-моему и сафари не съест)

а вообще это очень быстро и легко гуглится

UPD input type="range" работает в сафари, хроме и опере, http://htmlbook.ru/html/input/type

в опере работают все типы инпутов, в этом плане опера всех обошла