Search code examples
javascriptzooming

Zooming In/Out instantaneously

How would I set this up so zoom changes instantaneously as you move the dragger?

https://jsfiddle.net/5ek6drwk/6/

enter image description here

  var svg = document.getElementsByTagName('svg')[0];
        var w = parseFloat(svg.getAttribute('width'));
        var h = parseFloat(svg.getAttribute('height'));

        document.getElementById('zoom').addEventListener('change',
          function() {
            document.getElementById('rv').textContent = this.value;
            svg.setAttribute('width', w + this.valueAsNumber);
            svg.setAttribute('height', h + this.valueAsNumber * h / w);
          }, false);
Solution

  • You'll probably want to use input rather than change since input will call your function after the value of the range slider is changed immediately while change will call it only when the value is committed by the user.

    https://developer.mozilla.org/en-US/docs/Web/Events/input

    So try this:

    document.getElementById('zoom').addEventListener('input', ...