Slider Question? How Do I Display Images on Range?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ZhangJiao
    New Member
    • May 2014
    • 1
    #1

    Slider Question? How Do I Display Images on Range?

    Hello I'm new to HTML Programming.

    Code:
    <html>
<body>
<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>

<script type="text/javascript">
function showValue(newValue)
{
	document.getElementById("range").innerHTML=newValue;
}
</script>

</body>
</html>
    How do I make it display an image when it reaches a certain number on the slider? (i.e. When range==5 it displays image x.jpg)
    Last edited by Rabbit; May 26 '14, 05:27 PM. Reason: Please use [code] and [/code] tags when posting code or formatted data.
    Tags: None
    • Exequiel
      Contributor
      • Jul 2012
      • 288
      #2
      Code:
      You can try this simple code. :)
<html>
<head>
<script>
function showValue(newValue)
{
		var img = document.getElementById("img_output");
    document.getElementById("range").innerHTML=newValue;
    if(newValue == 5)
    {
    	img.innerHTML='<img src="theimg.jpeg">';
    }
    else
    {
    	img.innerHTML="";
    }
}
</script>
</head>
<body>
</body>
<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>
<div id="img_output">
</div>
</html>

        Comment

        Previous template Next
        Working...