mat-slider: not updating immediately on drag

Wasn't working for me, even after installing hammerjs per Step 2 Set Up Hammer JsSupport.

HammerJS provides gesture recognition capabilities required by some components (mat-slide-toggle, mat-slider, matToolTip).

...

NPM

npm install --save hammerjs

Yarn

yarn add hammerjs

After installing, import it on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

However, I finally found a comment in the issues on github that solved it, basically:

import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';import { GestureConfig } from '@angular/material';providers: [    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },]

in root.module.ts.

I had the same problem, fixed by importing hammerjs in polyfills.ts

Install: npm install hammerjs --save

Import in polyfills.ts: import 'hammerjs';

If this doesn't work you might have something else going on. You should also make sure "BrowserAnimationsModule" is imported in your app.module.ts

Their couple of Setups Need to be done for adding gesture control in material design

1. install hammerjsnpm install hammerjs --save
2. install hammerjs typesnpm install @ types/hammerjs --save-dev

3. import hammerjs on main.ts

   import 'hammerjs';

   import { enableProdMode } from '@angular/core';

4. Override GestureConfig in AppModule.ts

providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }]