Angular 14 - Slider Still Doesn't Work With Capacitor

Question

I know this issue has been going on since 2018 and there are a LOT of posts and different solutions, however none have worked for me.

I have created a new Angular 14 project, removed the start template, added capacitor and material. I added a slider from the first Material example . If I run the project via:

ng serve --open

I get this:

It works as expected in the browser. Then I do:

ng build
npx cap sync
npx cap run android

to see the slider in Android Studio in an emulator. You can click and cause the slider to move, but you cannot "slide" the slider, which is the point. It "works" something like this:

During the troubleshooting process, I have reviewed many solutions. The most important I think are:

• This SO discussion from 2020 . This discussion boils down to "install hammerjs". There are various places to do this, main.ts, polyfill.ts, my component, etc. While some appear to have had success with this, I have not. This post also mentions that the order of loading modules matters. I have respected this ordering in my example app.
• This GitHub discussion/bug report . The final outcome is essentially "order matters" as well and it cannot be fixed apparently. Also, this bug report is from 2017, so some fixes are no longer valid. For example, "MaterialModule" is no longer a thing. There is also a lot of talk about hammer. Several people had success by putting hammer in various places (insert your own joke), but nothing has worked so far. There is also talk of GestureConfig, which no longer seems to exist in @angular/material? In short: no success.

I apologize in advance that I cannot "post a minimum repo" at this time but this is pretty easy to create:

• Create an angular project
• Add capacitor & Material
• put a slider somewhere
• send it to an emulator or phone

It seems lots of people are still having this problem. In 2022, 4 years into this problem, is there a "right way" to use the slider to make it actually do the job or is it best to abandon material in this case?

I am by no means an expert at Angular so it's very possible it's my mistake. I would prefer to use Material if possible, but the slider is pretty fickle it seems.

My html:

<mat-slider aria-label="unit(s)"></mat-slider>

My SCSS:

mat-slider {
width: 300px;}

app.module.ts (my component is MatchAnalysisComponent)

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MatchAnalysisComponent } from './match-analysis/match-analysis.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatSliderModule } from '@angular/material/slider'; @NgModule({ declarations: [ AppComponent, MatchAnalysisComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatSliderModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Answer 1

The best solution for me was to abandon the mat-slider and use the html input with type range. The tradeoff is the html range input cannot be easily styled. At least it works as expected and works well with Angular versus the material slider which is unusable on a mobile device.