<!DOCTYPE html><html><head><title>Show Image</title><style>html{background-color:#FFFFFF;font-size:16px;line-height:1.5;color:#333333;}@media(min-width:940px){html{font-size:18px;}}body{font-family:"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;font-style:normal;font-weight:500;font-size:17px;color:#333;margin:10px;padding:0px;width:80%;margin-left:auto;margin-right:auto;}input[type='range']{height:10px;background:#ddd;width:60%;}input[type='text']{//height:20px;width:50px;}</style><script>functioncimg(){varrval=document.getElementById('barnum').value;//avaritag=document.getElementById('imgtag');//cvarisrc="img/"+rval+"-img.jpg";//bdocument.getElementById('boxnum').value=" No. "+rval;document.getElementById('imglbl').innerHTML="Image SRC : <b>"+isrc+"</b><br />";itag.src=isrc;}</script></head><body>
Image No :
<inputtype="text"name="boxnum"id="boxnum"value="1"/><inputtype="range"min="1"max="35"step="1"value="1"id="barnum"name="barnum"oninput='cimg()'/><hr/><pid="imglbl"></p><imgid="imgtag"name="imgtag"src="img/1-img.jpg"width="80%"height="80%"><!--
onchange vs. oninput
onchange : Perubahan setelah selesai
oninput : Perubahan langsung terjadi
--></body></html>
<inputtype="text"name="boxnum"id="boxnum"value="1"oninput="msg(this.value)"/><!-- OR --><inputtype="text"name="boxnum"id="boxnum"value="1"oninput="msg(document.getElementById('boxnum').value)"/>