Angular 材料垫滑块无法与 Hammer.js 一起正常工作

Question

I was stuck on this for a while so sharing this (as actively encouraged on SO) in case others are facing the same problem.

In Angular when a custom Hammer.js config is created to prevent it blocking vertical page scroll and you are using Angular Material , you might find the slider action not work smoothly, or allow the slider to be dragged.

If similar to me, you followed suggestions online, you probably created a custom Hammer config in app.module.ts like this:

export class MyHammerConfig extends HammerGestureConfig {
  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
    touchAction: 'pan-y'
  });

  return mc;
 }
}

With the provider declaration:

{provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}

The above config ensures only horizontal swipes are handled by Hammer, allowing vertical swipe events to reach the browser to scroll the page up and down.
However, if you happen to use the Angular Material mat-slider then the custom Hammer config class can cause issues with the slider action.

As mentioned earlier I will answer my own question below.

Versions used:
Angular 8.0.0
Angular Material 8.0.0

Answer 1

To fix the problem with Angular Material mat-slider when a custom Hammer config is used, you simply extend from the GestureConfig class from "angular/material" instead of HammerGestureConfig:

import { GestureConfig } from '@angular/material';

export class MyHammerConfig extends GestureConfig  {
  buildHammer(element: HTMLElement) {
    return new GestureConfig({touchAction: 'pan-y'}).buildHammer(element);
  }
}

This should sort the slider problem.

Credit to post in Github:
https://github.com/angular/components/issues/4278#issuecomment-399572805