Angular Material の Slider で条件付きスライダーを実現する
条件付きスライダーとは、両端が 0-100 のようなスライダーを準備しておき、
そのうちユーザーは、 0-80 までしか操作できないといったスライダーと定義します。
おそらく、フロント側のバリデーションなどで使用する用途が多いのではないでしょうか。
Angular Material の Example に載っていなかったので、試してみました。
https://material.angular.io/components/slider/examples
コード
<mat-slider
#slider
min="0"
max="100"
(input)="handleChange($event)"
></mat-slider>import { Component, ViewChild } from "@angular/core";
@Component({
selector: "continuous-slider-demo",
templateUrl: "continuous-slider-demo.html"
})
export class ContinuousSliderDemo {
@ViewChild("slider") slider;
public handleChange(event): void {
this.slider.value = event.value > 80 ? 80 : event.value;
}
}