Replace material slider with default HTML

Author: znorman-harris

apps/notebook/components/src/app/components/animation-controls/animation-controls.component.html

@@ -31,8 +31,19 @@
     ></mat-icon>
   </div>
 
-  <!-- band index slider -->
-  <mat-slider
+  <div class="custom-slider">
+    <input
+      type="range"
+      [value]="frame"
+      min="0"
+      max="{{ nFrames - 1 }}"
+      (mousedown)="pause()"
+      (mouseup)="play()"
+      (input)="onInputChange($event)"
+    />
+  </div>
+
+  <!-- <mat-slider
     style="width: 50%"
     min="0"
     max="{{ nFrames - 1 }}"
@@ -45,5 +56,5 @@
       (dragStart)="pause()"
       (input)="onInputChange($event)"
     />
-  </mat-slider>
+  </mat-slider> -->
 </div>

apps/notebook/components/src/app/styles/shared-styles.scss

@@ -66,3 +66,13 @@ $cell-height-limit: 500px;
 .embedded-image-with-horizontal-toolbar {
   max-width: calc(100% - 50px);
 }
+
+.custom-slider {
+  input[type='range'] {
+    accent-color: #{$accent} !important;
+  }
+
+  :focus {
+    outline: none !important;
+  }
+}