I want to create a mat-slider with custom steps of 0.25, 0.5, 1, 2, 3
What value can I give my increment? code below
<mat-slider #slider [min]="0.25" [max]="3" [step]="[increment]" (input)="onInputChange($event)" </mat-slider>
this.increment = ???
step's type is number so I afraid you can't reach your goal directly.
But an indirect solution can be like this: we want to have a mat-slider that it's output( finalValue:number ) can be 0.25 or 0.5 or ... .
1- You have 5 steps. Store the steps in a array like steps=[0.25 , 0.5 , 1 , 2 , 3]
2- Use mat-slide as usual in order to have 5 steps. for example set min=0, max=4, step=1
3- In onInputChange() you can see the new value of mat-slide. Let's name it stepIndex,which is an integer between 0 and 4.
4- Use the stepIndex to figure out the final value. A simple mapping.
You can see all of this in here:
https://stackblitz.com/edit/angular-p2iz4u?file=src%2Fapp%2Fslider-overview-example.ts