Изменить ползунок при перетаскивании

Question

У меня есть ползунок Javascript, который использует массив для параметров. Тем не менее, он не меняется при перетаскивании.

var img = document.getElementById('img');
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];

function setImage(obj) {
  var value = obj.value;
  img.src = img_array[value];

}

<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />
<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" />

Может ли кто-нибудь дать мне несколько советов о том, как изменить изображение, когда я перетаскиваю ползунок, а не когда я отпускаю кнопку мыши

Answer 1

Использовать oninput вместо onchange

( Получить значение ползунка во время его перемещения? )

var img = document.getElementById('img');
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];

function setImage(obj) {
  var value = obj.value;
  img.src = img_array[value];

}

<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />
<input oninput='setImage(this)' type="range" min="0" max="1" value="0" step="1" />

Answer 2

Переместите var img = document.getElementById('img'); внутрь функции.

var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];
function setImage(obj)
{
    var img = document.getElementById('img');
    var value = obj.value;
    img.src = img_array[value];

}

<img id='img' src='http://www.w3schools.com/images/w3logotest2.png'/>
<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" />