Components: 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]

[jelbourn]

Looked into it a bit, and unfortunately there's no mechanism for our modules to effectively say "My provider is more important than your provider" (and also no way to change BrowserModule so that it can say that it's less important).

Best we can do for now is to document that the order matters; sent #4291 for this

[iliketomatoes]

Hi, I just wanted to point out that I found out another weird behavior.
In order to make md-slider work together with hammerjs inside a lazy loaded module, I have to import MdSliderModule both in the main App.module and in the Lazy.module. This is a wasteful import since I only use MdSliderModule inside the LazyModule.

[mmalerba]

@iliketomatoes could you please open a separate issue for this with minimal repro

[Snesi]

@iliketomatoes dude you are a life saver! I've spent all day trying to figure out why the md-slider would work with ng serve and not when built with ng build.

[Thomas-Webber]

I had this problem because i forgot to import 'hammerjs'; in the app's root module, I also upgraded angular with
npm i @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest typescript@latest --S -E

then npm i @angular/compiler-cli@latest --D -E
and it was solved

[chasemgray]

The import order solution never worked for me, though it does seem to be related to something overriding Hammer gestures. I was able to get it working with the following in app module.

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

// Angular material has a bug with the import order of browserModule and angular material which causes Hammger gestures to get overridden.
@NgModule({
  providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }
  ]
});

[mswilson4040]

My issue was due to missing hammerjs. Docs note that hammerjs is required for the slider gesters

npm install hammerjs --save

[ghost]

I have the same problem. I've configured hammer to allow vertical scroll on pan section:

export class MyHammerConfig extends HammerGestureConfig {

  buildHammer(element: HTMLElement) {

      let mc = new Hammer(element, {

          touchAction: "pan-y",

      });

      return mc;

  }

}

and now slider doesn't drag fine.
If i remove this settings everything works fine.
Maybe it overwrites something?

[hodglem]

Same problem here. I never needed to import MaterialModule at all. That threw me off at first reading through this thread. I followed the directions in the accepted answer here and the animation worked. (I missed in the docs where hammerjs must be running on the page).

[estevanjantsk]

@chasemgray best human ever.

[21knowledgePHP]

had the same problem I juste needed to make the file with JS library the last to be called after jquery

[insidewhy]

And 18 months later this is still an issue, the hacks in that stack overflow and in this ticket don't solve the problem for me. Even with an empty <mat-slider></mat-slider>.

[akamat35]

@biandtlp Having the same issue. Did you find a solution.

Thanks!

[Nodios]

I had the same issue.
What I did was:

1. check if I installed @angular/animations
2. check if I installed hammerjs
3. check if I included BrowserAnimationsModule before the MatSliderModule
4. check if I imported hammerjs at application root -> I didn't do that and once I imported it, it worked. (https://material.angular.io/guide/getting-started#step-5-gesture-support)

[jscti]

This should really be re-opened ..

I have 2 very similar projects :

• the require from the docs is enough on the first one
• on the second one, require was not enough and only the solution given by @chasemgray worked (thanks !)

[gimox]

same problem here, slider drag problem after added a custom hammer config, the boot module sequence is correct. problem is still here!
Angular 6.0 and material 6.0

[pawmel]

@gimox

import 'hammerjs';

in polyfills.ts

had the same problem after upgrading to angular 6.0

[gimox]

@pawmel done! but don't work!!!

[romaneso]

I am facing the same issue as you guys, my material slider won't let me drag. I've tried every solution mentioned above but still no success.

[pbuhrmann]

@romaneso This worked for me:
npm install hammerjs --save
npm install @ types/hammerjs --save-dev

import 'hammerjs'; // This in app.module, not working without it

[ewaschenko]

@penrique Just tried that, still not working. Also tried what the material docs say which is to add it to main.ts which also does not work. Googling the issue show several different ways. Would be nice for the team to clarify the correct way.

[rkajbaf]

Alright, here is what worked for me, in my app.module.ts

I can scroll, and I can slide. Angular/Material 5.1.1 and Hammer 2.0.8.

THE KEY: Use GestureConfig which comes with Material as it seems to be what Angular Material
uses as a default, so that's what needs to be your starting point, not HammerGestureConfig.

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

declare var Hammer: any;
@Injectable()
export class HammerConfig extends GestureConfig  {
  buildHammer(element: HTMLElement) {
    return new GestureConfig({touchAction: 'pan-y'}).buildHammer(element);
  }
}

...

@NgModule({
  declarations: [ ...  ],
  imports: [ 
    BrowserModule,
    MatSliderModule,
    BrowserAnimationsModule
    ...
  ],
  entryComponents: [ ... ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    }
  ]
...

[F0rt1s]

Still can't get the slider to work. Imported hammerjs, I think I got the module import order right, but no luck:

This is in a lazy loaded module.

[charanjits]

@rkajbaf You sir solved the issue! 👍 🥇

[iulianmids]

@rkajbaf mine also! thanks

[ajaygangarde]

@rkajbaf thanks you so much it worked perfectly.

[sglvladi]

After a bit of fiddling around, I managed to get around the issue by simply making sure that the BrowserModule and BrowserAnimationsModule modules are imported before the MatSliderModule. This is something that other people have mentioned in the past.

One important requirement (and also the one that fooled me) is that this order MUST also be preserved within the imports section of the @NgModule() decorator inside app.module.ts.

Thus, this is what my app.module.ts looks like:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
import { MatSliderModule } from '@angular/material/slider';
...
@NgModule({
    ...
    imports: [
        ...
        BrowserModule,                  //
        BrowserAnimationsModule,        // IMPORTANT
    MatSliderModule,                //
        ...
    ],
  ...
})

Also it is necessary to import hammerjs inside main.ts, .e.g:
``` typescript
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'hammerjs';
...
````

I am using Angular 6.1.8 & Material 6.4.7. Hope this helps!

[UmutAkkaya]

The import order solution never worked for me, though it does seem to be related to something overriding Hammer gestures. I was able to get it working with the following in app module.

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

// Angular material has a bug with the import order of browserModule and angular material which causes Hammger gestures to get overridden.
@NgModule({
  providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }
  ]
});

You are the best!

[robertbrower-technologies]

What fixed this for me:

import { _HammerGestureConfig_, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as Hammer from 'hammerjs';
import { GestureConfig } from '@angular/material';

export class MyHammerConfig extends GestureConfig {
overrides = {
// override hammerjs default configuration
'swipe': { direction: Hammer.DIRECTION_ALL }
}
}

Don't use HammerGestureConfig as your config class. Use GestureConfig from '@angular/material'

[broweratcognitecdotcom]

If you're using mat-slider in a lazy loaded module, then you must also import MatSliderModule in your app.module.

[blaze515]

Experienced this same issue with an app that uses routing and has several child routes with components. I was importing the MatSliderModule at the child component (i.e. child.module.ts) level only. I thought since the RouterModule is after the BrowserAnimations model that it would be ok, but I also needed to import MatSliderModule in the app.module.ts after BrowserAnimations and before the RouterModule:

@NgModule({
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    ...
    MatSliderModule,
    MatSliderToggleModule,
    RouterModule.forRoot(routes)
  ],

[MuhammadHasham23]

Just installed hammerjs. Working now.
npm install hammerjs --save

in app.module.ts:
import "hammerjs"

That's it.

[gerardoboss]

If you're using mat-slider in a lazy loaded module, then you must also import MatSliderModule in your app.module.

This worked out for me, the curious thing is why other component dont give you the same problem.

[benwinding]

This is still an issue! Please add this to the Documentation!

https://material.angular.io/components/slider/overview

[azuxx]

If you're using mat-slider in a lazy loaded module, then you must also import MatSliderModule in your app.module.

This is still an issue! Please add this to the Documentation!

https://material.angular.io/components/slider/overview

I confirm the solution. Please add to documentation: "If you're using mat-slider in a lazy loaded module, then you must also import MatSliderModule in your app.module"

[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._}