fix(material/slider): tick mark positioning (#30329)

(cherry picked from commit b5076f7)

Author: wagnermaciel

src/material/slider/slider.spec.ts

@@ -1119,9 +1119,11 @@ describe('MatSlider', () => {
   describe('slider with direction', () => {
     let slider: MatSlider;
     let input: MatSliderThumb;
+    let sliderEl: HTMLElement;
+    let fixture: ComponentFixture<StandardRangeSlider>;
 
     beforeEach(waitForAsync(() => {
-      const fixture = createComponent(StandardSlider, [
+      fixture = createComponent(StandardSlider, [
         {
           provide: Directionality,
           useValue: {value: 'rtl', change: of()},
@@ -1130,13 +1132,31 @@ describe('MatSlider', () => {
       fixture.detectChanges();
       const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
       slider = sliderDebugElement.componentInstance;
+      sliderEl = sliderDebugElement.nativeElement;
       input = slider._getInput(_MatThumb.END) as MatSliderThumb;
     }));
 
     it('works in RTL languages', fakeAsync(() => {
       setValueByClick(slider, input, 25, true);
       checkInput(input, {min: 0, max: 100, value: 75, translateX: 75});
     }));
+
+    it('should position the tick marks correctly with a misaligned step (rtl)', () => {
+      slider.showTickMarks = true;
+      slider.min = 0;
+      slider.max = 10;
+      slider.step = 9;
+
+      fixture.detectChanges();
+
+      const activeClass = '.mdc-slider__tick-mark--active';
+      const inactiveClass = '.mdc-slider__tick-mark--inactive';
+      const ticks = sliderEl.querySelectorAll(`${activeClass},${inactiveClass}`);
+
+      expect(ticks.length).toBe(2);
+      expect(ticks[0].getBoundingClientRect().x).toBe(312);
+      expect(ticks[1].getBoundingClientRect().x).toBeCloseTo(47.4, 2);
+    });
   });
 
   describe('range slider with direction', () => {
@@ -1622,11 +1642,17 @@ describe('MatSlider', () => {
       expect(tickEls.inactive.length).toBe(0);
     });
 
-    // TODO(wagnermaciel): Add this test once this is fixed.
-    // it('should position the tick marks correctly with a misaligned step', () => {});
+    it('should position the tick marks correctly with a misaligned step', () => {
+      slider.max = 10;
+      slider.step = 9;
+      fixture.detectChanges();
+
+      const {ticks} = getTickMarkEls();
+      expect(ticks.length).toBe(2);
 
-    // TODO(wagnermaciel): Add this test once this is fixed.
-    // it('should position the tick marks correctly with a misaligned step (rtl)', () => {});
+      expect(ticks[0].getBoundingClientRect().x).toBe(18);
+      expect(ticks[1].getBoundingClientRect().x).toBeCloseTo(282.6, 2);
+    });
   });
 
   describe('range slider with tick marks', () => {

src/material/slider/slider.ts

@@ -590,7 +590,8 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
   /** Returns the translateX positioning for a tick mark based on it's index. */
   _calcTickMarkTransform(index: number): string {
     // TODO(wagnermaciel): See if we can avoid doing this and just using flex to position these.
-    const translateX = index * (this._tickMarkTrackWidth / (this._tickMarks.length - 1));
+    const offset = index * (this._tickMarkTrackWidth / (this._tickMarks.length - 1));
+    const translateX = this._isRtl ? this._cachedWidth - 6 - offset : offset;
     return `translateX(${translateX}px`;
   }
 
@@ -788,7 +789,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     const step = this._step && this._step > 0 ? this._step : 1;
     const maxValue = Math.floor(this.max / step) * step;
     const percentage = (maxValue - this.min) / (this.max - this.min);
-    this._tickMarkTrackWidth = this._cachedWidth * percentage - 6;
+    this._tickMarkTrackWidth = (this._cachedWidth - 6) * percentage;
   }
 
   // Track active update conditions
@@ -877,10 +878,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     }
     const step = this.step > 0 ? this.step : 1;
     this._isRange ? this._updateTickMarkUIRange(step) : this._updateTickMarkUINonRange(step);
-
-    if (this._isRtl) {
-      this._tickMarks.reverse();
-    }
   }
 
   private _updateTickMarkUINonRange(step: number): void {