fix(slider): unable to slide to max value under certain conditions (#10364)

Fixes users not being to slide to the maximum value in a slider, in some cases, when the number of steps don't divide evenly into the maximum value.

Fixes #10148.

Author: crisbeto

src/lib/slider/slider.spec.ts

@@ -207,6 +207,18 @@ describe('MatSlider without forms', () => {
     it('should have aria-orientation horizontal', () => {
       expect(sliderNativeElement.getAttribute('aria-orientation')).toEqual('horizontal');
     });
+
+    it('should slide to the max value when the steps do not divide evenly into it', () => {
+      sliderInstance.min = 5;
+      sliderInstance.max = 100;
+      sliderInstance.step = 15;
+
+      dispatchSlideEventSequence(sliderNativeElement, 0, 1, gestureConfig);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(100);
+    });
+
   });
 
   describe('disabled slider', () => {

src/lib/slider/slider.ts

@@ -619,16 +619,29 @@ export class MatSlider extends _MatSliderMixinBase
 
     // The exact value is calculated from the event and used to find the closest snap value.
     let percent = this._clamp((posComponent - offset) / size);
+
     if (this._invertMouseCoords) {
       percent = 1 - percent;
     }
-    let exactValue = this._calculateValue(percent);
 
-    // This calculation finds the closest step by finding the closest whole number divisible by the
-    // step relative to the min.
-    let closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min;
-    // The value needs to snap to the min and max.
-    this.value = this._clamp(closestValue, this.min, this.max);
+    // Since the steps may not divide cleanly into the max value, if the user
+    // slid to 0 or 100 percent, we jump to the min/max value. This approach
+    // is slightly more intuitive than using `Math.ceil` below, because it
+    // follows the user's pointer closer.
+    if (percent === 0) {
+      this.value = this.min;
+    } else if (percent === 1) {
+      this.value = this.max;
+    } else {
+      let exactValue = this._calculateValue(percent);
+
+      // This calculation finds the closest step by finding the closest
+      // whole number divisible by the step relative to the min.
+      let closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min;
+
+      // The value needs to snap to the min and max.
+      this.value = this._clamp(closestValue, this.min, this.max);
+    }
   }
 
   /** Emits a change event if the current value is different from the last emitted value. */