MDCMigration: Update mat-slider in RangeInputComponent

tensorflow · Oct 23, 2023 · ca0c8fa · ca0c8fa
1 parent 38ebe63
commit ca0c8fa
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 729 deletions.
diff --git a/tensorboard/webapp/widgets/range_input/BUILD b/tensorboard/webapp/widgets/range_input/BUILD
@@ -28,6 +28,7 @@ tf_ng_module(
         "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//@angular/forms",
         "@npm//rxjs",
     ],
 )
@@ -47,9 +48,10 @@ tf_ts_library(
         ":range_input",
         ":types",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
+        "//tensorboard/webapp/angular:expect_angular_material_slider",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "@npm//@angular/core",
+        "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@types/jasmine",
     ],

diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.ng.html b/tensorboard/webapp/widgets/range_input/range_input_component.ng.html
@@ -18,48 +18,31 @@
   class="lower-input"
   type="number"
   [disabled]="!enabled"
-  [value]="lowerValue"
+  [(ngModel)]="lowerValue"
   (change)="handleInputChange($event, Position.LEFT)"
 />
 <input
   class="upper-input"
   type="number"
   [disabled]="!enabled"
-  [value]="upperValue !== null ? upperValue : ''"
+  [value]="upperValue"
   (change)="handleInputChange($event, Position.RIGHT)"
 />
 
 <mat-slider
   class="single-slider"
-  *ngIf="upperValue === null; else range"
-  [disabled]="!enabled"
-  color="primary"
   [min]="min"
   [max]="max"
-  [step]="1"
-  [value]="lowerValue"
-  (input)="handleSingleSliderChange($event.value)"
-></mat-slider>
-
-<ng-template #range>
-  <span *ngIf="min !== max" class="container" #container>
-    <span class="slider-track"></span>
-    <span
-      class="slider-track-fill"
-      [style.left]="getThumbPosition(lowerValue)"
-      [style.width]="getTrackWidth()"
-    ></span>
-    <span
-      class="thumb"
-      (mousedown)="handleMouseDown($event, Position.LEFT)"
-      [style.left]="getThumbPosition(lowerValue)"
-      [class.active]="isThumbActive(Position.LEFT)"
-    ></span>
-    <span
-      class="thumb"
-      (mousedown)="handleMouseDown($event, Position.RIGHT)"
-      [style.left]="getThumbPosition(upperValue)"
-      [class.active]="isThumbActive(Position.RIGHT)"
-    ></span>
-  </span>
-</ng-template>
+  [step]="calculateStepSize()"
+>
+  <input
+    matSliderStartThumb
+    (valueChange)="startThumbDrag($event)"
+    [(ngModel)]="lowerValue"
+  />
+  <input
+    matSliderEndThumb
+    (valueChange)="endThumbDrag($event)"
+    [(ngModel)]="upperValue"
+  />
+</mat-slider>
diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.scss b/tensorboard/webapp/widgets/range_input/range_input_component.scss
@@ -51,69 +51,69 @@ input {
 
 .single-slider {
   grid-area: slider;
-  padding: 0px;
-  ::ng-deep .mat-slider-wrapper {
-    top: 5px;
-    left: 0px;
-    right: 0px;
-  }
-}
-::ng-deep .single-slider.mat-slider-horizontal {
-  height: 12px;
-}
-
-.container {
-  grid-area: slider;
-  align-items: center;
-  box-sizing: border-box;
-  display: inline-flex;
-  height: $_thumb-size;
-  justify-content: center;
-  position: relative;
-  width: 100%;
-}
-
-.slider-track {
-  @include tb-theme-foreground-prop(background, slider-off);
-  height: 2px;
-  width: 100%;
-}
-
-.slider-track-fill {
-  position: absolute;
-  height: 2px;
-}
-
-.thumb {
-  @include tb-theme-foreground-prop(box-sadhow, slider-off, 0 0 0 1px);
-  border-radius: 100%;
-  display: inline-block;
-  height: $_thumb-size;
-  margin-left: -$_thumb-size * 0.5;
-  position: absolute;
-  top: 0;
-  transform-origin: center;
-  transition: transform 0.3s ease;
-  width: $_thumb-size;
-  will-change: transform;
-
-  &:hover {
-    cursor: grab;
-  }
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.thumb.active {
-  transform: scale(1.2);
-}
-
-.slider-track-fill,
-.thumb {
-  background: mat.get-color-from-palette($tb-primary);
-
-  @include tb-dark-theme {
-    background: mat.get-color-from-palette($tb-dark-primary);
-  }
+  // padding: 0px;
+  // ::ng-deep .mat-slider-wrapper {
+  //   top: 5px;
+  //   left: 0px;
+  //   right: 0px;
+  // }
 }
+// ::ng-deep .single-slider.mat-slider-horizontal {
+//   height: 12px;
+// }
+
+// .container {
+//   grid-area: slider;
+//   align-items: center;
+//   box-sizing: border-box;
+//   display: inline-flex;
+//   height: $_thumb-size;
+//   justify-content: center;
+//   position: relative;
+//   width: 100%;
+// }
+
+// .slider-track {
+//   @include tb-theme-foreground-prop(background, slider-off);
+//   height: 2px;
+//   width: 100%;
+// }
+
+// .slider-track-fill {
+//   position: absolute;
+//   height: 2px;
+// }
+
+// .thumb {
+//   @include tb-theme-foreground-prop(box-sadhow, slider-off, 0 0 0 1px);
+//   border-radius: 100%;
+//   display: inline-block;
+//   height: $_thumb-size;
+//   margin-left: -$_thumb-size * 0.5;
+//   position: absolute;
+//   top: 0;
+//   transform-origin: center;
+//   transition: transform 0.3s ease;
+//   width: $_thumb-size;
+//   will-change: transform;
+
+//   &:hover {
+//     cursor: grab;
+//   }
+//   &:active {
+//     cursor: grabbing;
+//   }
+// }
+
+// .thumb.active {
+//   transform: scale(1.2);
+// }
+
+// .slider-track-fill,
+// .thumb {
+//   background: mat.get-color-from-palette($tb-primary);
+
+//   @include tb-dark-theme {
+//     background: mat.get-color-from-palette($tb-dark-primary);
+//   }
+// }