javascript - Özel adımlarla bir Angular Material kaydırıcı aralığı oluşturma

0.25, 0.5, 1, 2, 3 özel adımlarıyla bir mat-slider oluşturmak istiyorum

Artışımı hangi değerde verebilirim? Aşağıdaki kod

<mat-slider #slider  [min]="0.25" [max]="3" [step]="[increment]" (input)="onInputChange($event)" </mat-slider>

this.increment = ???

Cevap #1

step's türü sayı olduğu için, korkarım hedefinize doğrudan ulaşamazsınız.

Ama dolaylı bir çözüm şöyle olabilir: Çıkışı (finalValue:number) 0.25 veya 0.5 veya ... olabilecek bir mat-slider istiyoruz.

1- 5 adımınız var. Adımları steps=[0.25, 0.5, 1, 2, 3] gibi bir diziye kaydedin

2- 5 adım olması için mat-slide’i her zamanki gibi kullanın. Örneğin min=0, max=4, step=1 olarak ayarlayın.

3- onInputChange() içinde mat-slide'ın yeni değerini görebilirsiniz. Bunu stepIndex olarak adlandıralım, bu 0 ile 4 arasında bir tamsayıdır.

4- Son değeri bulmak için stepIndex'i kullanın. Basit bir haritalama.

Bunun hepsini burada görebilirsiniz:

https://stackblitz.com/edit/angular-p2iz4u?file=src/app/slider-overview-example.ts