Estoy usando Sublime Text 3 y he intentado hacer que este control deslizante de rango acerque y aleje un sitio web para que sea interactivo para los visitantes. El código parece funcionar aquí, pero no en Sublime Text 3. ¿Hay algún consejo sobre cómo solucionar esto?
var zoomer = document.getElementById('zoomer'); var spacepic = document.getElementById('spacepic'); function deepdive(){ zoomlevel = zoomer.valueAsNumber; spacepic.style.webkitTransform = "scale("+zoomlevel+")"; pic.style.transform = "scale("+zoomlevel+")"; } /*Image Test 1*/ #milkyway-container { width: 100%; font-size: 0; border: 1px solid #111; overflow: hidden; margin: 0 auto; margin-top: 2rem; } #spacepic { width: 100%; } #zoomer { display: block; width: 30%; margin: 7rem auto; } @media all and (max-width: 500px) { #zoomer, #milkyway-container { width: 85%; } } <!DOCTYPE html > <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ORIGINS</title> <link rel="stylesheet" href="style.css" <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> <script> <script src="app.js"></script> </script> </head> <body> </div> <div id="milkyway-container"> <img src="https://images.pexels.com/photos/1252890/pexels-photo-1252890.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Milkyway Photo" id="spacepic"> <input type="range" min="1" max="4" value="1" step="0.1" id="zoomer" oninput="deepdive()"> </div> </body> </html>