Aumentar o tamanho da imagem etapa por etapa

[leandro220395]

Pessoal, sou novato em JS, gostaria de uma luz para esse projeto.

Gostaria que a imagem alterasse para uma largura X conforme vou diminuindo ou aumentando o ranger. Por exemplo, quando chega no valor 8, a imagem fica com 20px de largura.

Vejam meu codigo:

<title>Medidor de Anel</title>

<input id="ranger"type="range" value="33" min="0" max="33" oninput="this.nextElementSibling.value = this.value">
33

---

<script> var ranger = document.getElementById('ranger'); var image = document.getElementById('image'); var width = image.width; var height = image.height; var aro ranger.onchange = function(){ image.width = width * (ranger.value /33); image.height = height * (ranger.value /33); } </script>

[fiuzagr]

@leandro220395 , use o JSFiddle, ou similar, para colocar seu código e alguém te ajudar.

Oq parece aí no código é que vc não precisa da largura ou altura da imagem para definir uma nova. Oq vc precisa é encontrar o número que converte a escala (o seu ranger) no tamanho da imagem (parece que esse número é o 33). Algo assim:

const diameter = (ranger.value / 33) * 100; // quando ranger é 8, diametro será = 24.2424px
image.width = diameter;
image.height = diameter; // width = height, já que aparentemente a imagem é quadrada