I want to create a site with arabic support in angular material but when I give dir="rtl" I am facing issues for mat slider. when I click on thumb and drag it thumb goes reverse.
I have tried below solution but it is showing error that Can't bind to 'ngModel' since it isn't a known property of 'mat-slider'.
below is my stackblitz example. https://stackblitz.com/edit/45m3gu-suzg2w?file=src%2Fexample%2Fslider-range-example.html
Try just rotating the slider by 180 degrees, then we need to add the ngModel
at the input thumb level, not at the mat-slider level.
mat-slider.reverse-slider {
transform: rotateY(180deg);
}
<mat-slider class="reverse-slider">
<input
matSliderThumb
[(ngModel)]="sliderValue"
[min]="minValue"
[max]="maxValue"
[step]="stepValue"
/>
</mat-slider>
<p>Current Value: {{ sliderValue }}</p>
TS:
import { Component } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
import { FormsModule } from '@angular/forms';
/**
* @title Basic slider
*/
@Component({
selector: 'slider-overview-example',
templateUrl: 'slider-overview-example.html',
styleUrl: 'slider-overview-example.css',
standalone: true,
imports: [MatSliderModule, FormsModule],
})
export class SliderOverviewExample {
minValue: number = 0;
maxValue: number = 100;
stepValue: number = 1;
sliderValue: number = this.maxValue;
}