Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   angular-cropperjs, mat-slider (https://javascript.ru/forum/angular/78287-angular-cropperjs-mat-slider.html)

shtangen 21.08.2019 14:00

Jшибка увеличения фото в angular-cropperjs, с помощью mat-slider
 
Здравствуйте, вот моя проблема.
У меня есть 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>


Часовой пояс GMT +3, время: 14:08.