Angular material slider not sliding

Question

I am using mat-slider and, while trying to slide the control using the mouse, it does not slide, either on the left or right. It is only working when I click to a point in the sliding line. My code is:

<div>
    <mat-slider></mat-slider>
</div>

Answer 1

You could already have Hammerjs installed and imported in the app module, and maybe it didn't work for you.

Verify in the polyfills.ts file you have imported hammersjs and @angular/animations. This file is found in src/polyfills.ts. Open it, If you can't find the following code, paste it into the polyfills.ts file.

Note: It should not be commented, eye.

import 'hammerjs';
import '@angular/animations';

Answer 2

For those who are using lazy loading, first import this:

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

And then, put this in the root app module:

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

Check this issue for more info