Creating an angular material slider range with custom steps

Question

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 = ???

https://stackoverflow.com/questions/67904662/how-to-make-non-linear-input-range-at-angular4/67919425#67919425 — Eliseo, Aug 19 '21 at 06:54

score 9 · Accepted Answer · answered Aug 18 '21 at 20:24

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:

1 Answers1