角料滑块降序运动

Question

有没有办法将滑块从 100 移动到 1，而不是从 1 移动到 100 目前我看到我们只有一个 min 属性和 max 属性，因此滑块值按升序移动 https://material.angular.io/components/slider/overview

<mat-slider class="example-margin" [min]="1" [max]="100" [step]="5" [discrete]="true"[showTickMarks]="true"> <input matSliderThumb [(ngModel)]="value" #slider> </mat-slider> 

感谢您的回复，谢谢。

尝试使用反转属性，但这会翻转填充线

Answer 1

Angular Material Slider 不支持开箱即用。

min

值需要小于

max

值。但您可以使用

model()

同步值并使用

computed()

计算所需值：

value = model(1);
adjustedValue = computed(() => 101 - this.value());

模板：

<mat-slider [min]="1" [max]="100">
  <input matSliderThumb [(ngModel)]="value" />
</mat-slider>

<p>Value: {{ value() }}</p>
<p>Adjusted value: {{ adjustedValue() }}</p>

StackBlitz 演示：https://stackblitz.com/edit/grqmza?file=src%2Fexample%2Fslider-overview-example.ts