Search code examples
angularangular-material

mat slider not working properly with dir="rtl"

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

Solution

  • 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.

    Global style:

    mat-slider.reverse-slider {
  transform: rotateY(180deg);
}

    HTML:

    <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;
}

    Stackblitz Demo