fix(slider): inconsistent cursor behavior if user's pointer moves around while dragging

src/material/slider/slider.scss

@@ -35,6 +35,11 @@ $mat-slider-focus-ring-size: 30px !default;
   padding: $mat-slider-padding;
   outline: none;
   vertical-align: middle;
+
+  &:not(.mat-slider-disabled):active,
+  &.mat-slider-sliding:not(.mat-slider-disabled) {
+    @include cursor-grabbing;
+  }
 }
 
 .mat-slider-wrapper {
@@ -102,14 +107,9 @@ $mat-slider-focus-ring-size: 30px !default;
 }
 
 %_mat-slider-cursor {
-  .mat-slider:not(.mat-slider-disabled) & {
+  .mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) & {
     @include cursor-grab;
   }
-
-  .mat-slider:not(.mat-slider-disabled) &:active,
-  .mat-slider-sliding:not(.mat-slider-disabled) & {
-    @include cursor-grabbing;
-  }
 }
 
 .mat-slider-thumb {

src/material/slider/slider.spec.ts

@@ -215,6 +215,13 @@ describe('MatSlider', () => {
       expect(sliderInstance.value).toBe(100);
     });
 
+    it('should prevent the default action of the `selectstart` event', () => {
+      const event = dispatchFakeEvent(sliderNativeElement, 'selectstart');
+      fixture.detectChanges();
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
   });
 
   describe('disabled slider', () => {

src/material/slider/slider.ts

@@ -120,6 +120,9 @@ const _MatSliderMixinBase:
     '(slide)': '_onSlide($event)',
     '(slideend)': '_onSlideEnd()',
     '(slidestart)': '_onSlideStart($event)',
+    // On Safari starting to slide temporarily triggers text selection mode which
+    // show the wrong cursor. We prevent it by stopping the `selectstart` event.
+    '(selectstart)': '$event.preventDefault()',
     'class': 'mat-slider',
     'role': 'slider',
     '[tabIndex]': 'tabIndex',