В общем, нужно синхронизировать див блок со слайдером (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 код мне не нужен, интересен алгоритм, если уже делали подобное, то поделитесь примером, буду рад подглядеть=)
