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!

Oh. I just looked it up. No, I don't I'm afraid. Can't publish too much of the code, doesn't belong to me. — serlingpa, Jan 14 '18 at 12:30
You only need enough code to reproduce your issue. By the way have you searched on github issues of material2 for this? — Hoang Duc Nguyen, Jan 14 '18 at 13:13

score 66 · Answer 1 · edited Jun 20 '20 at 09:12

66

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 28 '18 at 00:23

Lee Richardson

8,331
6
42
65

Awesome! Out of ten solutions, your solution was the one that was working! Cheers! – romaneso May 16 '18 at 07:38
11

This did not work for me, adding `import 'hammerjs'` to `main.ts` like described at the provided link did the trick. – Tomnar Jul 19 '18 at 18:58
Worked for me after adding import 'hammerjs/hammer' in the actual component. NOT to the main.js and NOT to the polyfills.js – Jack Rus Feb 28 '19 at 19:56
1

You are a life saver. This is the best solution. Thank you! – Manoj De Mel Mar 15 '19 at 00:40
worked for me. Strangely while I was working with template driven I did not have to add the provider. When switching to reactForms it stoped working until adding the provider in `app.module.ts`. – Andre Elrico Jun 19 '19 at 11:36
This is also a fix for Angular and Electron desktop app. – Andrew Allen Jul 03 '19 at 09:24
HammerJS is no longer required for material version9++ https://github.com/angular/components/blob/master/guides/v9-hammerjs-migration.md. Aparently? – intotecho May 31 '21 at 07:57
In Angular 11 it says something like that `can not import as @angular/material is not an module`. Hmm? Rmove it and use only `HammerModule`? – MrHIDEn Jul 05 '21 at 11:14

score 12 · Answer 2 · edited Jan 27 '20 at 20:21

12

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

edited Jan 27 '20 at 20:21

Yona Appletree

8,801
6
35
52

answered Feb 04 '18 at 20:17

Paul Haggo

1,338
1
11
20

score 5 · Answer 3 · answered Mar 03 '19 at 17:24

5

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

install hammerjs npm install hammerjs --save
install hammerjs types npm install @ types/hammerjs --save-dev
import hammerjs on main.ts

import 'hammerjs';

import { enableProdMode } from '@angular/core';
Override GestureConfig in AppModule.ts

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

answered Mar 03 '19 at 17:24

blazehub

1,880
19
25

A very big THANK YOU! – Mina Soleimanzadeh Jul 28 '21 at 07:33

score 4 · Answer 4 · answered Jun 13 '18 at 06:43

4

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

answered Jun 13 '18 at 06:43

bunt

302
2
13
25

2

Just to clarify: If you use `(input)="itChanged($event.value)"` instead of `(change)="itChanged($event.value)"` the component gets continuous updates. – bert Mar 02 '19 at 07:21
As of Material v9, I believe this is the correct answer. Works for me on v12. HammerJS is no longer required for material version9++ https://github.com/angular/components/blob/master/guides/v9-hammerjs-migration.md – intotecho May 31 '21 at 10:21
See also https://stackoverflow.com/questions/41896786/get-angular-material-v2-sliders-value-while-sliding – intotecho May 31 '21 at 12:58

score 3 · Answer 5 · answered Nov 02 '18 at 14:11

3

I had the same issue fixed it with importing BrowserAnimationsModule before MaterialModules.

answered Nov 02 '18 at 14:11

Adil B

144
2
1

score 1 · Answer 6 · answered Apr 21 '20 at 11:57

Found the answer in the issue opened here https://github.com/angular/components/issues/17420

Using Angular 9 and above you should import HammerModule along side this import

import {BrowserModule, HAMMER_GESTURE_CONFIG, HammerModule} from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

imports: [
...
BrowserAnimationsModule,
BrowserModule,
MatSliderModule,
HammerModule,
]

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

Tried everything else and this was the only thing that worked in our Angular 9+ app. Simple, beautiful, thanks Gil! — Michael F., Jul 03 '20 at 09:42

mat-slider: not updating immediately on drag

6 Answers6

Linked