<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>
hi people, based on this code, I need to be able to load the range between 0 - 35 an image between 35 - 65 another image and 65 - 100 other.
thank you very much for your help
I added if(newVal >= 0 && newVal < 35)
with 2 conditions to check if value is in a range and then set <img>
You can't use document.getElementById("img").src = newVal+ ".jpg";
, in that case you will get 100 different images
<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; if(newVal >= 0 && newVal < 35) document.getElementById("img").src = "first_image.jpg"; else if(newVal >= 35 && newVal < 65) document.getElementById("img").src = "second_image.png"; else if(newVal >= 35 && newVal < 65) document.getElementById("img").src = "third_image.png"; } </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.