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

Found the answer here. Basically I imported MaterialModule after BrowserAnimationsModule

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

Answer 3

I know i am late but if anyone stumble upon this issue with the latest version of material(8.2.1), you need to install hammerjs and import it in your main.ts file using below commands

Install

npm install hammerjs

import on main.ts file

import 'hammerjs';

Answer 4

On Angular 9, installing Hammer JS worked for me as others have stated.

1. npm install hammerjs
2. Add it to app.module - imports: [..., HammerModule]

Answer 5

I think you should install HammerJS to your project:

npm install hammerjs

Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents.

Look at the Angular Material documentation on HammerJS.

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

DEMO without HammerJS:

Answer 6

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 7

Angular Material 14:

• you don't need HammerJS
• you don't need to include MatSliderModule in the main module if you are using lazy-loading
• you don't need any GestureConfigs
• if you are using zone.js flags, be sure that "mousemove" is not in __zone_symbol__UNPATCHED_EVENTS