Can't drag md-slider

[allurefx]

Bug, feature request, or proposal:

Looks like a bug, but it could be user error (I'm new to Material)

What is the expected behavior?

Should be able to drag on md-slider

What is the current behavior?

Drag doesn't work, though click on slider does set the value

What are the steps to reproduce?

Please check out http://ravinutala.com/d/index.html for an example with just the slider

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

Just want the correct behavior, not asking for any changes

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

Angular 4.0.3, Material 2.0.0-beta.3, Windows 10, Chrome/FF (only tested on these two)

Is there anything else we should know?

[willshowell]

You need to import MaterialModule after either BrowserAnimationsModule or BrowserModule (probably just best to put it after both).

Unfortunately, I couldn't tell you why

[stevedeighton]

I'm getting this issue too. I have tried your suggestion @willshowell but it still doesn't work. It also advises that MaterialModule is now deprecated. I've tried importing the MdSliderModule in the same way though, after BrowserModule and BrowserAnimationsModule, to no avail.

I can't help but think this is something to do with hammerjs, but I'm sure I have followed the Getting Started guide properly.

A little stumped... :/

[willshowell]

@stevedeighton Can you provide a bare-minimum repo?

[allurefx]

Thanks a lot, @willshowell, that was it: I just had to move MaterialModule after BrowserAnimationsModule (and before BrowserModule, FYI). @stevedeighton, did you change the order in the imports array of @NgModule?

[stevedeighton]

@allurefx yep I did that, I'll have another play later tonight with it and provide a demo if I'm still struggling Thanks @willshowell :D

[stevedeighton]

Aha, found it. I was running angular 4.0.0 still. Upgraded to 4.0.3 and its working now 👍

[mmalerba]

My guess is that hammerjs isn't loaded yet when the angular app is bootstrapped.

@jelbourn Is there anything we can do to improve this? (e.g. autodetect when hammerjs loads or provide a way for users to trigger it to recheck).

[jelbourn]

@mmalerba I pulled up the repro and found that Hammer is loaded here at bootstrap. The problem is that it's using the default gesture config rather than the one from material. Haven't figured out why yet.

[jelbourn]

@allurefx what does your app module (that you're bootstrapping) look like?

[jelbourn]

Oh, reading the whole thread now I see. If BrowserModule is added after MaterialModule, its gesture config overrides the one slider needs. Wonder if there's anything we can do about tnat.

[allurefx]

@jelbourn, the problem appears to be with importing MaterialModule before BrowserAnimationsModule; BrowserModule location doesn't appear to matter. E.g.,

Below one does NOT work
imports: [MaterialModule, BrowserAnimationsModule, BrowserModule, HttpModule]

Below ones both work
imports: [BrowserAnimationsModule, MaterialModule, BrowserModule, HttpModule]
imports: [BrowserAnimationsModule, BrowserModule, MaterialModule, HttpModule]