CODEWITHSUNDEEP
javascripthtmlcss
m0n0l0g
m0n0l0g

Reputation: 21

Panzoom range meter is not going with my zoomclick

I'm using panzoom for an project of mine. I have an range indicator, that gives the user the information how far it is zoomed in.

https://timmywil.com/panzoom/demo/

This code doenst work for me: What do I need to change?

const panzoom = Panzoom(elem)
zoomInButton.addEventListener('click', panzoom.zoomIn)
zoomOutButton.addEventListener('click', panzoom.zoomOut)
resetButton.addEventListener('click', panzoom.reset)
rangeInput.addEventListener('input', (event) => {
  panzoom.zoom(event.target.valueAsNumber)
})

Upvotes: 0

Views: 197

Answers (1)

biberman
biberman

Reputation: 5777

If you inspect the first example from the panzoom page that you linked and copied the code from, you will find the following html:

<div class="live-example">
  <div class="buttons">
    <label>Try me: </label>
    <button>Zoom in</button>
    <button>Zoom out</button>
    <button>Reset</button>
    <input class="range-input" type="range" min="0.1" max="4" step="0.1" value="1">
    <div>
      <input type="checkbox" id="disable-pan" checked="">
      <label for="disable-pan">Enable panning</label>
    </div>
  </div>
  <div class="panzoom-parent" style="overflow: hidden; user-select: none; touch-action: none;">
    <div class="panzoom" style="cursor: move; user-select: none; touch-action: none; transform-origin: 50% 50%; transition: none 0s ease 0s; transform: scale(1.2) translate(0px, 0px);">
      <img width="450" height="450" src="awesome_tiger.svg">
    </div>
  </div>
</div>

Because i found no online solution like CDN i couldn't provide a minimal reproducable example in a stack snippet. You have to install panzoom with npm like mentioned on the panzoom github page...

Upvotes: 1

Related Questions