Angular material slider descending order movement

Question

is there a way to move slider from 100 to 1 instead of moving it from 1 to 100 currently im seeing we only have a min property and max property, so the slider values move in ascending order https://material.angular.io/components/slider/overview

<mat-slider class="example-margin" [min]="1" [max]="100" [step]="5" [discrete]="true"[showTickMarks]="true"> <input matSliderThumb [(ngModel)]="value" #slider> </mat-slider>

appreciate the response, thank you.

Tried using the invert property but that's flipping the fill line

JSON Derulo · Accepted Answer · 2024-07-08 14:16:07Z

The Angular Material Slider doesn't support this out of the box. The min value needs to be smaller than the max value. But with the help of Signals you can use model() to sync the value and computed() to calculate the desired value:

export class MyComponent { value = model(1); adjustedValue = computed(() => 101 - this.value()); }

Template:

<mat-slider [min]="1" [max]="100"> <input matSliderThumb [(ngModel)]="value" /> </mat-slider> <p>Value: {{ value() }}</p> <p>Adjusted value: {{ adjustedValue() }}</p>

StackBlitz demo: https://stackblitz.com/edit/grqmza?file=src%2Fexample%2Fslider-overview-example.ts

If you want to show this value in the thumb label, you can use the custom thumb label feature.

Collectives™ on Stack Overflow

Angular material slider descending order movement

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related