mat-slider: not updating immediately on drag

Question

I am using @angular/material in my Angular 5 app. The version of Angular Material I am using is 5.0.2. I am using @angular/animations 5.1.2.

I have a very simple use case of the slider, like this:

<mat-slider style="width:100%;"></mat-slider>

but for some reason, when dragging the slider handle, it does not move to its new position until the mouse is released, which is obviously not very good. I have checked the Material demo and that works as expected: the slider moves on mouse move, and doesn't just jump when the mouse is released.

Can anyone suggest why this might be happening? It'll never pass AC at work!

Answer 1

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.

Answer 2

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

Answer 3

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

1. install hammerjs npm install hammerjs --save
2. install hammerjs types npm 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 }]

Answer 4

I had related problem w/ value not updating, distinguishing (change) from (input) event was the trick.