how to change images size using range slider in javascript and html?

Question

the proplem is i have diffrents images all presented by id in selected option
the images from selected option , i want to change size any image that selected by range slider
anyone can help plz?

 var ranger = document.getElementById('ranger'); var image1 = document.getElementById('image1'); var width = image1.width; var height = image1.height; ranger.onchange = function(){ image1.width = width * (ranger.value / 1); image1.height = height * (ranger.value / 1); } 

 <div class="custom-select" > <select onchange="$('#image1').attr('src', this.options[this.selectedIndex].value);" id="select"> <option value=''> </option> <option value='0-0.png'>0-0</option> <option value='0-1.png'>0-1</option> <option value='0-2.png'>0-2</option> <option value='0-3.png'>0-3</option> <option value='0-4.png'>0-4</option> <option value='0-5.png'>0-5</option> </select> </div> <img id="image1" width="100 " height="200 " > <div class="slidecontainer"> <input id="ranger" type="range" min="1" max="5" value="0" step="1" class="slider" style="width: 500px" > </div> 

Answer 1

HTML:

<select id="mySelect" onchange="setImage();">
  <option value="0-0.jpeg">0-0</option>
  <option value="0-1.jpeg">0-1</option>
  <option value="0-2.jpeg">0-2</option>
  <option value="0-3.jpeg">0-3</option>
  <option value="0-4.jpeg">0-4</option>
  <option value="0-5.jpeg">0-5</option>
</select>

<input id="mySlider" type="range" min="1" max="5" value="1" step="1" onchange="resizeImage();" style="width:500px;">

<div id="img-wrapper" style="width:200px; height:200px;">
  <img src="0-0.jpeg" alt="My Image!" id="myImage" style="width:100%; height:1005;" />
</div>

Javascript:

function setImage() {
  var e = document.getElementById('mySelect');
  document.getElementById('myImage').src = e.options[e.selectedIndex].value;
}

function resizeImage() {
  var image = document.getElementById('img-wrapper'),
      ranger = document.getElementById('mySlider');
  image.style.width = 200*(mySlider.value / 1)+'px';
}

Note that (in this case), you do not need to set width and height - changing one will automatically update the other ;)

Answer 2

I think you should change the height and width by usin .attr()

Html :

   <img id="image" src="image.jpg" width="100 " height="200 "  >
      <div class="slidecontainer">
      <input id="ranger" type="range" min="1" max="5" value="1" step="1" class="slider" style="width: 500px"  >

Script :

var width = $("#image").attr("width");
var height = $("#image").attr("height");
$("#ranger").change( function() {
  $("#image").attr("width",width * (ranger.value / 1))
  $("#image").attr("height",height * (ranger.value / 1) )
});