Как сделать изменение позиции с помощью ползунка?

Question

[Владимир]

Тут представлен код codepen.io/anon/pen/wMdQXE не могу понять как сделать что бы при передвижении ползунка проценты в background-position изменялись.

P.S. альтернативные фреймворки не предлагать только средствами js

Answer 1

[trushka]

codepen.io/anon/pen/xZrGBo
Там ещё добавил инструкции, так сказать, для правильного вертикального отображения в ИЕ и ФФ, ато ваш вариант в ФФ отображается, как на скрине из предыдущего ответа)) И вместо onload на oninput повесил, чтоб сразу на изменения реагиовало, в процессе так сказать. Но transition только на box-shadow оставил, так как оно мешает при таскании в реальном времени, так сказать

Answer 2

[coderisimo]

я не особо разбираюсь в предмете, но ,кажется, это просто ))

<div class="edit_position">
 <input id="position_y" value="0" type="range" min="0" max="100" step="0">
 <div id="position_images"
  style="background-image: url(http://storage4.static.itmages.ru/i/16/0109/h_1452366540_5854535_7e16dcb9c5.jpg);
  background-position: 0% 0%;"></div>
 <div class="clear"></div>
 <input id="position_x" value="0" onchange="editPosX();" type="range" min="0"  max="100" step="0">
</div>
<input type='text' id='info'>

function editPosX(){
 
  document.getElementById('info').value= document.getElementById('position_x').value;
}