Material 2.0.0-beta.3 md-slider not dragging

Question

Hopefully, this is a stupid question.

I just added a md-slider to a project I am building for my employer. (thus I have no code to show sorry)

I Imported MdSliderModule into the module I'm working in. Added the tag in my template where I wanted it. It showed up and looks great but won't drag. I can click on it to change its value but I can't drag it.

Am I missing something? Does Angular have a Dragging module this component uses that I need to import? Has anyone else seen this?

We are using:

• Angular ^4.0.2
• Material 2.0.0-beta.3

Any help or suggestions of things for me to try will be helpful. Thank you in advance for your time.

Answer 1

I had exactly the same problem until I discovered that I hadn't installed hammer.js.

npm install --save hammerjs

then add hammerjs as a dependency in the scripts array of your angular-cli.json file:

 "scripts": [
    //possibly other scripts here...
    "../node_modules/hammerjs/hammer.min.js"
  ],
 ...

Hopefully this will resolve the issue - recompile everything to be sure that changes take effect

Answer 2

Accepted answer alone didn't work for me. Finally found a comment in the issues on github that solved it. After ensuring hammerjs was installed per Step 5 Gesture Support added this to root.module.ts for the win:

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

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