Components: Can't drag slider bullet unless I manually import Hammer.js

[odahcam]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

I expect the slider to be draggable.

What is the current behavior?

I can not drag the slider bullet, it just moves when I click in the bar.

What are the steps to reproduce?

Create a blank app, add material, add slider component and try to use it.

What is the use-case or motivation for changing an existing behavior?

I have to manually import import 'hammerjs/hammer'; to be able to drag the bullet or add it as a polyfill, but I think that is not cool to have it globally imported.

Slider-toggle (switch) works even when no Hammer.js is imported.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material ^5.

Is there anything else we should know?

The slider works fine when importing Hammer.js manually. I think it should be imported here.

[EdricChan03]

I'm pretty sure that's intentional.

In the docs (Slider > Overview):

Note: the sliding behavior for this component requires that HammerJS is loaded on the page.

It's also in the guide for Getting started:

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.

It even says that HammerJS import should be ideally included in src/main.ts:

After installing, import it on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

[josephperrott]

Closing as this is working as intended. For touch/drag to work hammer.js will need to be loaded.

[odahcam]

So why the switch doesn't need that?

[EdricChan03]

@odahcam Doesn't need what? Hammer.js?

[odahcam]

Yes, when I used the MatSlideToggleModule it's touch functionalities worked fine without importing Hammer, also it made the Slider drag work, when I removed the toggle, the Slider stopped working again. So I think SliderToggle imports Hammer by itself, while the common Slider doesn't.

It could just be an old version behavior changed in the latest versions, I've update to 5.2.4 and today was the first time I installed and imported Hammer.

My question is, if I'm right of course, why do these components/modules have different behaviors?

[ChenReuven]

i have import hammer.js + MatSlideToggleModule and nothing help :(
Drag is Not working (i am with angular material 5.2.5 and with angular 5.0.0)

Yes, when I used the MatSlideToggleModule it's touch functionalities worked fine without importing Hammer, also it made the Slider drag work, when I removed the toggle, the Slider stopped working again. So I think SliderToggle imports Hammer by itself, while the common Slider doesn't.

It could just be an old version behavior changed in the latest versions, I've update to 5.2.4 and today was the first time I installed and imported Hammer.

My question is, if I'm right of course, why do these components/modules have different behaviors?

[matthewdfleming]

Just putting this here in case someone else runs into this.

I was also having issue with the dragging working. For my app (Angular 7) I had to do these things to get the slider working:

1. add dependency: (package.json dependency - "hammerjs": "^2.0.8")
2. add it to the app: (polyfills.ts - import 'hammerjs')
3. in app.module.ts: {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}

If I didn't do the last step the dragging of the thumb/disc wouldn't work.

[felixchiang86]

1. in app.module.ts: {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}

The above made my slider draggable, thanks @matthewdfleming !!!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}