2

I have a Javascript slider bar which uses an array for the options. However, It does not change as you drag. 

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" />

can anyone give me some guidance on how to change the image while I am dragging the slider, rather than when I let go of the mouse button

Manse
  • 37,765
  • 10
  • 83
  • 108
Abi Saunders
  • 51
  • 5
  • Nothing is wrong with it, working for me -> http://jsfiddle.net/d5o10fb7/4/ – Manse Jun 25 '18 at 13:00
  • No, I wanted the image to change as I am interacting with the scrollbar. At the moment you have to let go before the image changes. – Abi Saunders Jun 25 '18 at 13:01
  • The change event is only triggered at the end of the interaction, so you need to use something [like this](https://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging) – ppajer Jun 25 '18 at 13:03
  • It worked, thanks! – Abi Saunders Jun 25 '18 at 13:11

1 Answers1

1

Use oninput instead of onchange

(Get value of slider while it's being moved?)

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" />
Ethan P
  • 84
  • 8