HTML Javascript change image with Slider bar

Question

I know how to make a slider bar in HTML, but how can I do change an image with a slider bar. For instance, if the value of my slider bar is 25 then it shows image that named 25.png and if slider bar value is 32 then it shows image 32.png (assuming that there are 100 images and the slider bar has a maximum value of 100)

function showValue(newValue) {
  document.getElementById("range").innerHTML=newValue;
}

<input type="range" min="0" max="100" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>

score 4 · Accepted Answer · answered Sep 19 '14 at 14:17

    <input id="valR" type="range" min="0" max="100" value="0" step="5" oninput="showVal(this.value)" onchange="showVal(this.value)" />
    <span id="range">0</span>
    <img id="img">

<script>
    
    var val = document.getElementById("valR").value;
        document.getElementById("range").innerHTML=val;
        document.getElementById("img").src = val + ".jpg";
        function showVal(newVal){
          document.getElementById("range").innerHTML=newVal;
          document.getElementById("img").src = newVal+ ".jpg";
        }
</script>

Mike · Answer 2 · 2014-09-19T14:36:46.303

Something a little like this maybe.

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];
    
}

<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" />

<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />

score 1 · Answer 3 · answered Sep 19 '14 at 14:16

1

You'd do something like document.getElementById("img").src = newValue + ".jpg";, where img is the ID of the image you want to change.

answered Sep 19 '14 at 14:16

j08691

204,283
31
260
272

And if I wanted the image to be showen on a canvas, ussing these methods? – LabRat Sep 19 '14 at 14:40
You mean placing the image on a ` – j08691 Sep 19 '14 at 14:42
Yes (I normaly dont ask HTML questions sorry if there basic ones) – LabRat Sep 19 '14 at 14:45
That's pretty much a separate question. You can see http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas for how to do that. – j08691 Sep 19 '14 at 14:48

HTML Javascript change image with Slider bar

3 Answers3

Linked