AppModule

app.component(initial).html

<lib-ngx-image-zoom 
    [thumbImage]='imageUrl' [fullImage]=imageUrl maxZoomRatio="10" magnification="1"
     enableScrollZoom="true" altText="img-not-found">
</lib-ngx-image-zoom>

app.component(initial).ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
imageUrl: string;
  constructor() {}
  ngOnInit() {
    this.imageUrl="YOUR_URL_HERE"
  }
}

app.component(range added).html

        // Adding Range slider with +/- buttons
        
        <div class="zoom-control" (click)="onDecrease()"> - </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)">
        <div class="zoom-control" (click)="onIncrease()"> + </div>

app.component.html

<div (mousewheel)="scroll(val)">
                    <lib-ngx-image-zoom #val  
                        [thumbImage]='imageUrl' [fullImage]=imageUrl maxZoomRatio="10" magnification="1"
                        enableScrollZoom="true" altText="img-not-found">
                    </lib-ngx-image-zoom>
</div>

app.component.ts

.
..
...
 scaleRange: number;
....
....


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

  onDecrease() {
    if (this.scaleRange <= 1) {
      this.scaleRange = 1;
    } else {
      this.scaleRange = this.scaleRange - 1;
    }
  }
  onIncrease() {
    if (this.scaleRange >= 10) {
      this.scaleRange = 10;
    } else {
      this.scaleRange = this.scaleRange + 1;
    }
  }

  scroll(event) {
    this.scaleRange = event.magnification;
  }

app.module(initial).ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { NgxImageZoomModule } from 'ngx-image-zoom';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxImageZoomModule // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }