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);
}