Здравствуйте, вот моя проблема.
У меня есть mat-slider на который я пытаюсь добавить функцию cropper.zoom, из библиотеки angular-cropperjs, чтобы по передвижению ползунка менять масштаб фото.
Пока смог добиться результата приближения и отдаления с помощью нажатия на кнопоки.
Во время перетягивания ползунка введет себя некорректно.
//cropper
@ViewChild('cropperObj', { static: false }) public cropperObj: CropperComponent;
//slider
autoTicks = false;
disabled = false;
invert = false;
showTicks = false;
thumbLabel = false;
vertical = false;
max = 1;
min = -1;
step = 0.01;
value = 0;
// зум +
zommUp() {
this.cropperObj.cropper.zoom(0.1);
}
// зум -
zoomDown() {
this.cropperObj.cropper.zoom(-0.1);
}
// слайдер
onInputChange(event: MatSliderChange) {
this.cropperObj.cropper.zoom(+"0.0" + event.value);
console.log(this.value, event.value);
}
<mat-slider
class="m-1"
(input)="onInputChange($event)"
[invert]="invert"
[max]="max"
[min]="min"
[step]="step"
[thumbLabel]="thumbLabel"
[tickInterval]="tickInterval"
[value]="value"
[vertical]="vertical">
</mat-slider>
<button mat-icon-button class="dialog-b" mat-raised-button (click)="zommUp()"><i class="fas fa-plus"></i>
</button>
<button mat-icon-button class="dialog-b" mat-raised-button (click)="zoomDown()"><i class="fas fa-minus"></i>
</button>
