question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

12reactions
matthewdflemingcommented, Mar 6, 2019

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.

1reaction
ChenReuvencommented, Nov 28, 2018

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular material mat-slider not working properly with Hammer.js
In Angular when a custom Hammer. js config is created to prevent it blocking vertical page scroll and you are using Angular Material...
Read more >
new features - LOU TRELUS
Fixed a bug where if Min Height was set, the Slider was broken. Fixed a bug where Slide Links did not work without...
Read more >
Tips 'n Tricks - Hammer.js
Tips 'n Tricks · Event delegation and DOM events · Try to avoid vertical pan/swipe · Test on a real device · Remove...
Read more >
Update Guide | Ignite UI for Angular - Infragistics
Check out this article on updating how to update to a newer version of the Ignite UI for Angular library.
Read more >
Ylc - River Thames Conditions - Environment Agency - GOV.UK
Pestalozzi pedagogia infantil, Rauno numminen, Pajama city return policy, Mapa brodmann sus funciones, S-rs3sw manual, Il2 battle of stalingrad map, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found