Can't drag mat-slider

Question

I'm unable to drag the mat-slider (only click works).

I have tried all the answers, including:

1. installing hammerjs and adding it to src/main.ts:

   import 'hammerjs';
   

2. provide GestureConfig to root module (app.module.ts) providers:

   { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }
   

Angular material version:

"@angular/material": "^8.1.2",

But it's still not working. Unfortunately, my project is too big to add a source for a demo, but let me know if there is anything else I can share.

Answer 1

After a long time of trying to figure out why it happens, I finally found it:

mat-slider is not draggable when working with Ivy enabled.

Opened an issue on Github to track this: https://github.com/angular/components/issues/17420

Answer 2

Everything you mentioned should be enough to make slider work.

I've created a stackblitz example for you. It works fine here. Check it out and let me know what is the difference.

If everything is same look at version of hammerjs.

Answer 3

in your app.module.ts add following

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

in imports section

imports: [
MatSliderModule]

and also import hammerjs in your main.ts file.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

// HammerJS is a popular library that helps you add support for touch gestures (e.g. swipe, pan, zoom, rotate) to your page.

Answer 4

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 },
]