Javascript-форум - Синхронизировать блок с input[range]

В общем, нужно синхронизировать див блок со слайдером (type="range").

Т.е хочу очень сильно кастомизировать слайдер, но понять не могу, каким образом связать эмулятор(блок) со слайдером.

Идея такая:

container - с width: 100%, в нем помещается какой-то блок и, чтоб при его движении/клике в нужную область (и слайдер сдвигался на соответствующий шаг).

Нужно что-то вроде этого, только наоборот ;)

<style>
.container{
    margin: 0 15px;
    position: relative;
    width: 400px;
}
.ctrl{
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    background: #123;
}
</style>

<input type="range" min="1" max="4" step="1">
<div class="container">
    <div class="ctrl"></div>
</div>

<script>
var items = 4,
    step = 100 / items,
    ctrl = document.querySelector('.ctrl'),
    slider = document.querySelector('input');

slider.onchange = function() {
    ctrl.style.left = this.value * step + '%';
}
</script>

p.s код мне не нужен, интересен алгоритм, если уже делали подобное, то поделитесь примером, буду рад подглядеть=)