Блог

Я много часов пытался заставить работать вертикальный слайдер (например, ion-range). Похоже, лучший вариант — использовать ползунок материала.

У меня было много проблем с его работой на мобильных устройствах, и, по крайней мере, импорт не тривиален, поэтому я хотел бы поделиться тем, что сработало для меня.

Сначала установите hammer JS

 npm install hammerjs 
npm install @types/hammerjs 
 

Затем вам нужно импортировать hammerjs отдельно

 //in app.module.ts
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';
import { HammerModule } from '@angular/platform-browser';
import 'hammerjs';
 

Затем добавьте его к импорту, а также к поставщикам

 //in app.module.ts
imports: [BrowserModule, IonicModule.forRoot(), NgxSliderModule, AppRoutingModule, HammerModule
    ],

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

Затем в вашем модуле страницы импортируйте слайдер

 //in myComponent.module.ts
import { MatSliderModule } from '@angular/material/slider';

...
imports: [
    MatSliderModule,
  ],
 

Теперь вы готовы использовать его 🙂