How to change image size with slider?

Question

I have this bit of code and I was wondering if it is possible to change the size of the image just by moving the slider:

<div class="slidecontainer">
  <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

Can anyone help pls?

you can add an event-listener to the input element that listens to the "change" or "input" event and provide it a function that connects tha value of its parameter to the width and height property of the image element. — fonzane, May 04 '21 at 05:09

score 1 · Accepted Answer · answered May 04 '21 at 05:14

You can add an eventListener to the range and then apply your logic there to change the dimension of the image.

const slider = document.getElementById('Slider');
slider.addEventListener('input', handleChange);


function handleChange(e) {
  const img = document.getElementById("Elon");
  const {value, max} = e.target;
  img.style.width = `${value*max}px`;
  img.style.height = `${value*max}px`;
}

<div class="slidecontainer">
  <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

score 0 · Answer 2 · answered May 04 '21 at 05:14

Something like:

document.getElementById("Slider").addEventlistener("change", (value) => {
  let image = document.getElementById("Elon");
  image.style.width = value;
  image.style.height = value;
});

Notice, this is just a sketch and will prob not work if u just copy and paste it.

score 0 · Answer 3 · answered May 04 '21 at 05:17

Change img width on slider change. Something like below

const sliderElem = document.getElementById('Slider');
const imageElem = document.getElementById('image');

function sliderChange() {
  const width = image.getAttribute('width');
  image.setAttribute("width", Number(width) + Number(sliderElem.value));

}

<div class="slidecontainer">
  <input onChange="sliderChange()" type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img id="image" width="150" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

score 0 · Answer 4 · answered May 04 '21 at 05:23

You need to use some javascript for this Here is the code you can run and see it. If you want more zoom then instead of x*10 write 20 or 30 according to your choice.

document.getElementById("Slider").oninput = function changeImageSize(){
         var x = document.getElementById("Slider").value;
         document.getElementById("Elon").style.height=String(x*10) + "px";
        }

<div class="slidecontainer">
        <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
      </div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

How to change image size with slider?

4 Answers4