diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index 7d4f34fd8f34..dd7c2e55af94 100644 --- a/src/material/slider/slider.scss +++ b/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 { diff --git a/src/material/slider/slider.spec.ts b/src/material/slider/slider.spec.ts index 2fae33c6f2dd..05d65530fcf3 100644 --- a/src/material/slider/slider.spec.ts +++ b/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', () => { diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts index e331837e9df4..c9d98a7a6a3d 100644 --- a/src/material/slider/slider.ts +++ b/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',