javascript - Skapa ett angular material-sliderintervall med anpassade steg

Jag vill skapa en mat-slider med egna steg på 0,25, 0,5, 1, 2, 3

Vilket värde kan jag ge mitt increment? koden nedan

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

this.increment = ???

Svar #1

step's typ är nummer så jag är rädd att du inte kan nå ditt mål direkt.

Men en indirekt lösning kan vara så här: vi vill ha en mat-slider vars output (finalValue:number) kan vara 0,25 eller 0,5 eller ... .

1- Du har 5 steg. Spara stegen i en array som steps=[0.25, 0.5, 1, 2, 3]

2- Använd mat-slide som vanligt för att ha 5 steg. Till exempel sätt min=0, max=4, step=1

3- I onInputChange() kan du se det nya värdet av mat-slide. Låt oss kalla det stepIndex, vilket är ett heltal mellan 0 och 4.

4- Använd stepIndex för att ta reda på det slutgiltiga värdet. En enkel kartläggning.

Du kan se allt detta här:

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