title: Angular 9 Mat-Slider does not work properly on iOS Devices
body: <p><strong>EDIT : 
  On iOS 12.4.6 it still doesn't work, but at least the bar is not jumpy anymore, but still not registering the values, or unmute at pre-setted value of 20% .
  On iOS 13.3.1 ( my other phone ) all the described problems reproduce</strong></p>
  
  <p>I have a mat-slider inside my web application to control a video's volume that runs in the background.</p>
  
  <p>On iOS ( Safari / Chrome ) , it doesn't respect any of my implementations that when the user unmutes video to jump to 20% ( It jumps to 100% however value is not registered, it still hears as 20% ) .</p>
  
  <p>If I try to slide to any value, it jumps back to 100% by itself. With Taps and not Sliding it stays on the location but it's not registering the value ( the volume remains the same ) .</p>
  
  <p>On Android devices / Desktop it works just as I want it to.</p>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "taraful-turnenii-web-app",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve --host 192.168.1.2",
      "build": "ng build",
      "build-prod" : "ng build --prod",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^9.1.2",
      "@angular/cdk": "^9.2.1",
      "@angular/common": "~9.1.1",
      "@angular/compiler": "~9.1.1",
      "@angular/core": "~9.1.1",
      "@angular/forms": "~9.1.1",
      "@angular/material": "^9.2.1",
      "@angular/platform-browser": "~9.1.1",
      "@angular/platform-browser-dynamic": "~9.1.1",
      "@angular/router": "~9.1.1",
      "bootstrap": "^4.4.1",
      "hammerjs": "^2.0.8",
      "rxjs": "~6.5.4",
      "tslib": "^1.10.0",
      "zone.js": "~0.10.2"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.901.1",
      "@angular/cli": "~9.1.1",
      "@angular/compiler-cli": "~9.1.1",
      "@angular/flex-layout": "^9.0.0-beta.29",
      "@angular/language-service": "~9.1.1",
      "@types/jasmine": "~3.5.0",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "^12.11.1",
      "codelyzer": "^5.1.2",
      "jasmine-core": "~3.5.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~4.4.1",
      "karma-chrome-launcher": "~3.1.0",
      "karma-coverage-istanbul-reporter": "~2.1.0",
      "karma-jasmine": "~3.0.1",
      "karma-jasmine-html-reporter": "^1.4.2",
      "protractor": "~5.4.3",
      "ts-node": "~8.3.0",
      "tslint": "~6.1.0",
      "typescript": "~3.8.3"
    }
  }
  </code></pre>
  
  <p>CLI</p>
  
  <pre><code>     _                      _                 ____ _     ___
      / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
     / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
    / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
   /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                  |___/
  
  
  Angular CLI: 9.1.1
  Node: 13.13.0
  OS: win32 x64
  
  Angular: 9.1.2
  ... animations, common, compiler, compiler-cli, core, forms
  ... language-service, platform-browser, platform-browser-dynamic
  ... router
  Ivy Workspace: Yes
  
  Package                           Version
  -----------------------------------------------------------
  @angular-devkit/architect         0.901.1
  @angular-devkit/build-angular     0.901.1
  @angular-devkit/build-optimizer   0.901.1
  @angular-devkit/build-webpack     0.901.1
  @angular-devkit/core              9.1.1
  @angular-devkit/schematics        9.1.1
  @angular/cdk                      9.2.1
  @angular/cli                      9.1.1
  @angular/flex-layout              9.0.0-beta.29
  @angular/material                 9.2.1
  @ngtools/webpack                  9.1.1
  @schematics/angular               9.1.1
  @schematics/update                0.901.1
  rxjs                              6.5.5
  typescript                        3.8.3
  webpack                           4.42.0
  </code></pre>
  
  <p>HTML Code for mat-slider : </p>
  
  <pre><code>&lt;mat-slider class="matSlider" 
    [value]="matBarValue"
    (input)="videoElement.volume = $event.value"
    (change)="changeBtnIcoWithSlider(videoElement, muteBtn)" tickInterval="0.01" step="0.01" min="0" max="1"&gt;&lt;/mat-slider&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.mat-slider {
    position: relative;
    float: left;
    left: 0;
    right: 0;
    width: 17vw;
  }
  
  @media(max-width: 397px) {
  
    .mat-slider {
      margin-top: 3px;
      width: 200px;
    }
  }
  
  @media(max-width: 768px) {
  
    .mat-slider {
      margin-top: 3px;
      width: 77vw;
    }
  
  }
  </code></pre>
  
  <p>TS Code that is called within the slider</p>
  
  <pre><code>changeBtnIcoWithSlider(videoElement, muteBtn: HTMLButtonElement) {
      if (videoElement.volume &gt; 0) {
        videoElement.muted = false;
        this.matBarValue = videoElement.volume;
        muteBtn.innerHTML = 'Mute Video'
        this.imageSrc = 'assets/VolIcon.png';
      } else {
        muteBtn.innerHTML = 'Unmute Video';
        this.imageSrc = 'assets/MuteIcon.png';
        videoElement.muted = true;
      }
    }
  </code></pre>
  
  <p>What I tried : Adding hammerjs however I read that is not mandatory for this version of angular in order for mat-slider to work with gesture recognition ( It works on android .. ) </p>
  
  <p>Placing the mat slider module import after , BrowserAnimationsModule and BrowserModule, also in between or above them as I saw these kind of orders helped others.</p>
  
  <p>Nothing works.</p>
  
  <p>Thank you .</p>