Slider
기본
<mat-slider>
<input matSliderThumb>
</mat-slider>
다양한 옵션
ts
disabled = false;
max = 100;
min = 0;
showTicks = false;
step = 1;
thumbLabel = false;
value = 0;
html
<div class="example-label-container">
<label id="example-name-label" class="example-name-label">Value</label>
<label class="example-value-label">{{slider.value}}</label>
</div>
<mat-slider
[disabled]="disabled"
[max]="max"
[min]="min"
[step]="step"
[discrete]="thumbLabel"
[showTickMarks]="showTicks">
<input matSliderThumb [(ngModel)]="value" #slider
(dragEnd)="dragEnd($event)"
(dragStart)="dragStart($event)"
(valueChange)="valueChange($event)">
</mat-slider>
실시간 데이타 받기
matSlider에서는 실시간 데이타를 수신하는 방법은 위의 처럼 #을 사용하여 {{slider.value}} 처럼 사용하는 것이다.
그러나 controller에서는 이부분을 수신할 수 없다.
수신하기위해서는 (input)을 사용하여야 한다.
- html
<mat-slider
(input)="MatInput($event)"
>
<input matSliderThumb [(ngModel)]="value" #slider>
</mat-slider>
- ts
public MatInput(e: any) {
console.log('MatInput>>', e.target.value);
console.log('MatInput>>', this.value);
}