Quiero crear un mat-slider con pasos personalizados de 0.25, 0.5, 1, 2, 3
¿Qué valor le puedo dar a mi incremento? código a continuación
<mat-slider #slider [min]="0.25" [max]="3" [step]="[increment]" (input)="onInputChange($event)" </mat-slider> this.increment = ???el tipo de paso es el número , por lo que me temo que no puede alcanzar su objetivo directamente.
Pero una solución indirecta puede ser así: queremos tener un mat-slider cuya salida (finalValue:number) puede ser 0.25 o 0.5 o ... .
1- Tienes 5 pasos. Almacene los pasos en una matriz como pasos = [0.25, 0.5, 1, 2, 3]
2- Usa tapete-deslizamiento como de costumbre para tener 5 pasos. por ejemplo, establezca min=0, max=4, step=1
3- En onInputChange() puedes ver el nuevo valor de mat-slide. Llamémoslo stepIndex , que es un número entero entre 0 y 4.
4- Usa el stepIndex para calcular el valor final. Un mapeo simple.
Puedes ver todo esto aquí:
https://stackblitz.com/edit/angular-p2iz4u?file=src%2Fapp%2Fslider-overview-example.ts