How to use ngx-img-zoom with html range in Angular

Question

Angular ngx-img-zoom with pinch-zoom and scroll zoom at same time

Answer 1

Here is the solution,

in HTML Page,

            <div
            [ngStyle]="{'transform': 'scale(' + scaleRange +  ')','transform-origin': xValue + 'px ' + yValue + 'px'}">
            <div>
                <lib-ngx-image-zoom (zoomScroll)="scroll($event)" (zoomPosition)="mouseMove($event)"
                    zoomMode="toggle-click" [thumbImage]='imageUrl' [fullImage]=imageUrl maxZoomRatio="10"
                    [scrollStepSize]=".1" magnification="1" enableScrollZoom="true" altText="img-not-found">
                </lib-ngx-image-zoom>
            </div>
        </div>
<input type="range" min="1" max="10" step=".1" value={{scaleRange}} class="form-range"
            style="width: 200px; height: 50px;" #ref (change)="valueChanged(ref.value)">

The above code adds an image and a range which can be used to control the zoom of the Image.

Now in .ts ,

  imageUrl: string;
  scaleRange: number;
  xValue: number;
  yValue: number;


valueChanged(value: number) {
    if (value === 1) {
      this.scaleRange = 1;
    } else {
      this.scaleRange = value;
    }
  }

 scroll(magnification: number) {
    this.scaleRange = magnification;
  }
  mouseMove(event) {
    this.xValue = event.x;
    this.yValue = event.y;
  }