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>
Share
Improve this question
edited Sep 19, 2014 at 15:06
Daniel Morris
6,8928 gold badges27 silver badges30 bronze badges
asked Sep 19, 2014 at 14:12
LabRatLabRat
2,01412 gold badges57 silver badges95 bronze badges
3 Answers
Reset to default 4
<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.