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>

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>

• javascript
• html

3 Answers 3

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

Something a little like this maybe.

var img = document.getElementById('img');
var img_array = ['http://www.w3schools./images/w3logotest2.png', 'http://www.w3schools./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./images/w3logotest2.png' />

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