diff --git a/frontend/app/BUILD b/frontend/app/BUILD
index 5dde534ec..1acd4fdd8 100644
--- a/frontend/app/BUILD
+++ b/frontend/app/BUILD
@@ -19,7 +19,7 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_common_http",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_platform-browser_animation",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
diff --git a/frontend/app/app.ng.html b/frontend/app/app.ng.html
index 31280bdb4..22f016e55 100644
--- a/frontend/app/app.ng.html
+++ b/frontend/app/app.ng.html
@@ -9,7 +9,7 @@
 </div>
 
 <ng-template #progress_bar>
-  <div class="progress-container" [hidden]="!loading">
+  <div class="progress-container" *ngIf="loading">
     <div class="loading-message">Loading data</div>
     <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
   </div>
diff --git a/frontend/app/app_module.ts b/frontend/app/app_module.ts
index 82c132f73..d538d9778 100644
--- a/frontend/app/app_module.ts
+++ b/frontend/app/app_module.ts
@@ -1,6 +1,6 @@
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {EmptyPageModule} from 'org_xprof/frontend/app/components/empty_page/empty_page_module';
@@ -18,7 +18,7 @@ import {App} from './app';
   imports: [
     BrowserModule,
     HttpClientModule,
-    MatLegacyProgressBarModule,
+    MatProgressBarModule,
     EmptyPageModule,
     MainPageModule,
     BrowserAnimationsModule,
diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
index ecdf23feb..096da3044 100644
--- a/frontend/app/common/angular/BUILD
+++ b/frontend/app/common/angular/BUILD
@@ -27,7 +27,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_progress_bar",
+    name = "angular_material_progress_bar",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -107,7 +107,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_radio",
+    name = "angular_material_radio",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -115,7 +115,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_progress_spinner",
+    name = "angular_material_progress_spinner",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -139,7 +139,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_slide_toggle",
+    name = "angular_material_slide_toggle",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -147,7 +147,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_slider",
+    name = "angular_material_slider",
     srcs = [],
     deps = [
         "@npm//@angular/material",
diff --git a/frontend/app/components/capture_profile/BUILD b/frontend/app/components/capture_profile/BUILD
index 8ae1be62c..889a13065 100644
--- a/frontend/app/components/capture_profile/BUILD
+++ b/frontend/app/components/capture_profile/BUILD
@@ -21,8 +21,8 @@ xprof_ng_module(
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_dialog",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_spinner",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_snack_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_spinner",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/components/capture_profile/capture_profile_dialog",
         "@org_xprof//frontend/app/services/data_service",
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
index 23e02ffe6..dae38d462 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -23,8 +23,8 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_expansion",
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_radio",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_radio",
         "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/interfaces",
     ],
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
index 13b492930..e26c7fb47 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
@@ -29,10 +29,10 @@
 
   <div>
     <mat-form-field>
+      <mat-label>Profiling duration(ms)</mat-label>
       <input
         matInput
         type="number"
-        placeholder="Profiling Duration (milliseconds)"
         [(ngModel)]="duration"
       />
     </mat-form-field>
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
index 242d32ac2..b42e89f71 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
@@ -6,7 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatSelectModule} from '@angular/material/select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {BrowserModule} from '@angular/platform-browser';
@@ -25,7 +25,7 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     MatExpansionModule,
     MatFormFieldModule,
     MatInputModule,
-    MatLegacyRadioModule,
+    MatRadioModule,
     MatSelectModule,
     MatLegacyTooltipModule,
   ],
diff --git a/frontend/app/components/capture_profile/capture_profile_module.ts b/frontend/app/components/capture_profile/capture_profile_module.ts
index 2176dcd72..8c0882ba0 100644
--- a/frontend/app/components/capture_profile/capture_profile_module.ts
+++ b/frontend/app/components/capture_profile/capture_profile_module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
 
 import {CaptureProfile} from './capture_profile';
@@ -16,7 +16,7 @@ import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profi
     CommonModule,
     MatButtonModule,
     MatDialogModule,
-    MatLegacyProgressSpinnerModule,
+    MatProgressSpinnerModule,
     CaptureProfileDialogModule,
     MatLegacySnackBarModule,
   ],
diff --git a/frontend/app/components/graph_viewer/BUILD b/frontend/app/components/graph_viewer/BUILD
index 2a9f19a66..3097a77d9 100644
--- a/frontend/app/components/graph_viewer/BUILD
+++ b/frontend/app/components/graph_viewer/BUILD
@@ -20,7 +20,7 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
diff --git a/frontend/app/components/graph_viewer/graph_viewer.ng.html b/frontend/app/components/graph_viewer/graph_viewer.ng.html
index ce7fe9870..659286f33 100644
--- a/frontend/app/components/graph_viewer/graph_viewer.ng.html
+++ b/frontend/app/components/graph_viewer/graph_viewer.ng.html
@@ -6,10 +6,10 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <diagnostics-view [diagnostics]="diagnostics"></diagnostics-view>
-    <div class="progress-container" [hidden]="!loading">
+    <div class="progress-container" *ngIf="loading">
       <div class="loading-message">Loading graph viewer data</div>
       <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
     </div>
-    <iframe #iframe id="graph-html" [src]="graphvizUri | safe"></iframe>
+    <iframe #iframe id="graph-html" [src]="graphvizUri | safe" (load)="onIframeLoaded()"></iframe>
   </mat-sidenav-content>
 </mat-sidenav-container>
diff --git a/frontend/app/components/graph_viewer/graph_viewer.scss b/frontend/app/components/graph_viewer/graph_viewer.scss
index 65866d35c..b84b87548 100644
--- a/frontend/app/components/graph_viewer/graph_viewer.scss
+++ b/frontend/app/components/graph_viewer/graph_viewer.scss
@@ -41,6 +41,6 @@ mat-progress-bar {
 .progress-container {
   position: absolute;
   width: 100%;
-  margin: 300 0;
+  margin: 300px 0;
   z-index: 1;
 }
diff --git a/frontend/app/components/graph_viewer/graph_viewer.ts b/frontend/app/components/graph_viewer/graph_viewer.ts
index ca54aead3..779f56421 100644
--- a/frontend/app/components/graph_viewer/graph_viewer.ts
+++ b/frontend/app/components/graph_viewer/graph_viewer.ts
@@ -86,8 +86,18 @@ export class GraphViewer implements OnDestroy {
     return this.opName && this.selectedModule;
   }
 
+  setLoadingStatus(loading: boolean, diagnostics?: Diagnostics) {
+    this.loading = loading;
+    this.diagnostics = diagnostics || {...DIAGNOSTICS_DEFAULT};
+  }
+
+  onIframeLoaded() {
+    this.setLoadingStatus(false);
+  }
+
   onPlot() {
     if (!this.validToPlot()) return;
+    this.setLoadingStatus(true);
 
     // Update the query parameters in url after form updates
     const queryParams: GraphViewerQueryParams = {
diff --git a/frontend/app/components/graph_viewer/graph_viewer_module.ts b/frontend/app/components/graph_viewer/graph_viewer_module.ts
index ab6355c82..3095da1ca 100644
--- a/frontend/app/components/graph_viewer/graph_viewer_module.ts
+++ b/frontend/app/components/graph_viewer/graph_viewer_module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatOptionModule} from '@angular/material/core';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module';
 import {GraphConfigModule} from 'org_xprof/frontend/app/components/graph_viewer/graph_config/graph_config_module';
@@ -14,7 +14,7 @@ import {GraphViewer} from './graph_viewer';
     CommonModule,
     DiagnosticsViewModule,
     MatOptionModule,
-    MatLegacyProgressBarModule,
+    MatProgressBarModule,
     MatSidenavModule,
     PipesModule,
     GraphConfigModule,
diff --git a/frontend/app/components/main_page/BUILD b/frontend/app/components/main_page/BUILD
index 3b324cc1a..b53eae142 100644
--- a/frontend/app/components/main_page/BUILD
+++ b/frontend/app/components/main_page/BUILD
@@ -14,11 +14,12 @@ xprof_ng_module(
         "main_page.ng.html",
     ],
     deps = [
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
diff --git a/frontend/app/components/main_page/main_page.ng.html b/frontend/app/components/main_page/main_page.ng.html
index 9f16353b2..9892b5500 100644
--- a/frontend/app/components/main_page/main_page.ng.html
+++ b/frontend/app/components/main_page/main_page.ng.html
@@ -3,7 +3,7 @@
     <sidenav></sidenav>
   </mat-sidenav>
   <mat-sidenav-content>
-    <div class="progress-container" [hidden]="!loading">
+    <div class="progress-container" *ngIf="loading">
       <div class="loading-message">{{loadingMessage}}</div>
       <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
     </div>
diff --git a/frontend/app/components/main_page/main_page_module.ts b/frontend/app/components/main_page/main_page_module.ts
index 8bb411b89..e81fc956e 100644
--- a/frontend/app/components/main_page/main_page_module.ts
+++ b/frontend/app/components/main_page/main_page_module.ts
@@ -1,5 +1,6 @@
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {RouterModule, Routes} from '@angular/router';
 import {DcnCollectiveStats} from 'org_xprof/frontend/app/components/dcn_collective_stats/dcn_collective_stats';
@@ -65,7 +66,8 @@ export const routes: Routes = [
 @NgModule({
   declarations: [MainPage],
   imports: [
-    MatLegacyProgressBarModule,
+    CommonModule,
+    MatProgressBarModule,
     MatSidenavModule,
     EmptyPageModule,
     SideNavModule,
diff --git a/frontend/app/components/op_profile/BUILD b/frontend/app/components/op_profile/BUILD
index 01ad7982b..d9df6e699 100644
--- a/frontend/app/components/op_profile/BUILD
+++ b/frontend/app/components/op_profile/BUILD
@@ -23,9 +23,8 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
         "@org_xprof//frontend/app/common/angular:angular_material_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_slide_toggle",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_slide_toggle",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/components/op_profile/op_table",
         "@org_xprof//frontend/app/services/data_service",
diff --git a/frontend/app/components/op_profile/op_profile_common.scss b/frontend/app/components/op_profile/op_profile_common.scss
index 41cf97653..a7c04bb5a 100644
--- a/frontend/app/components/op_profile/op_profile_common.scss
+++ b/frontend/app/components/op_profile/op_profile_common.scss
@@ -15,7 +15,8 @@
 
 .control-container {
   display: flex;
-  padding-top: 32px;
+  align-items: center;
+  margin-top: 32px;
 }
 
 .control {
diff --git a/frontend/app/components/op_profile/op_profile_module.ts b/frontend/app/components/op_profile/op_profile_module.ts
index 53a3288be..9ae0080a1 100644
--- a/frontend/app/components/op_profile/op_profile_module.ts
+++ b/frontend/app/components/op_profile/op_profile_module.ts
@@ -1,10 +1,9 @@
 import {NgModule} from '@angular/core';
-import {MatIconModule} from '@angular/material/icon';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
-import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 import {OpProfile} from './op_profile';
 import {OpTableModule} from './op_table/op_table_module';
@@ -15,8 +14,7 @@ import {OpTableModule} from './op_table/op_table_module';
   imports: [
     MatFormFieldModule,
     MatInputModule,
-    MatLegacySliderModule,
-    MatLegacySlideToggleModule,
+    MatSlideToggleModule,
     OpTableModule,
     MatIconModule,
     MatLegacyTooltipModule,
diff --git a/frontend/app/components/pod_viewer/BUILD b/frontend/app/components/pod_viewer/BUILD
index d651f6b94..af43744a1 100644
--- a/frontend/app/components/pod_viewer/BUILD
+++ b/frontend/app/components/pod_viewer/BUILD
@@ -20,7 +20,7 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_divider",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
+        "@org_xprof//frontend/app/common/angular:angular_material_slider",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/pod_viewer/pod_viewer.ng.html b/frontend/app/components/pod_viewer/pod_viewer.ng.html
index fdbf19a80..c29399760 100644
--- a/frontend/app/components/pod_viewer/pod_viewer.ng.html
+++ b/frontend/app/components/pod_viewer/pod_viewer.ng.html
@@ -6,8 +6,7 @@
     <mat-slider
                 [min]="minStep"
                 [max]="maxStep"
-                [step]="1"
-                (change)="updateSelectedStep($event.value)">
+                [step]="1" #ngSlider><input matSliderThumb (change)="updateSelectedStep({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
     </mat-slider>
   </div>
   <div *ngIf="topology">
diff --git a/frontend/app/components/pod_viewer/pod_viewer_module.ts b/frontend/app/components/pod_viewer/pod_viewer_module.ts
index 05bbad5eb..147349a99 100644
--- a/frontend/app/components/pod_viewer/pod_viewer_module.ts
+++ b/frontend/app/components/pod_viewer/pod_viewer_module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
+import {MatSliderModule} from '@angular/material/slider';
 import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module';
 
 import {PodViewer} from './pod_viewer';
@@ -15,7 +15,7 @@ import {TopologyGraphModule} from './topology_graph/topology_graph_module';
     CommonModule,
     DiagnosticsViewModule,
     MatDividerModule,
-    MatLegacySliderModule,
+    MatSliderModule,
     StackBarChartModule,
     TopologyGraphModule,
   ],
diff --git a/frontend/app/components/pod_viewer/topology_graph/BUILD b/frontend/app/components/pod_viewer/topology_graph/BUILD
index 164fc1adf..d263e6da8 100644
--- a/frontend/app/components/pod_viewer/topology_graph/BUILD
+++ b/frontend/app/components/pod_viewer/topology_graph/BUILD
@@ -22,8 +22,8 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
         "@org_xprof//frontend/app/common/angular:angular_material_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
         "@org_xprof//frontend/app/common/angular:angular_material_menu",
+        "@org_xprof//frontend/app/common/angular:angular_material_slider",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
index 09bf07e47..389e530f7 100644
--- a/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
+++ b/frontend/app/components/pod_viewer/topology_graph/topology_graph.ng.html
@@ -25,9 +25,7 @@
       <mat-slider
         [min]="0"
         [max]="channelCount"
-        [step]="1"
-        [value]="selectedChannelIndex"
-        (change)="updateChannelIndex($event.value)">
+        [step]="1" #ngSlider><input matSliderThumb [value]="selectedChannelIndex" (change)="updateChannelIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
       </mat-slider>
       <mat-form-field class="channel-input" appearance="outline">
         <mat-label>Channel id</mat-label>
diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts
index c58edea49..60bc36adb 100644
--- a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts
+++ b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts
@@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {MatMenuModule} from '@angular/material/menu';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
+import {MatSliderModule} from '@angular/material/slider';
 
 import {TopologyGraph} from './topology_graph';
 
@@ -19,7 +19,7 @@ import {TopologyGraph} from './topology_graph';
     MatIconModule,
     MatInputModule,
     MatMenuModule,
-    MatLegacySliderModule,
+    MatSliderModule,
   ],
   exports: [TopologyGraph]
 })
diff --git a/frontend/app/components/range_slider/BUILD b/frontend/app/components/range_slider/BUILD
deleted file mode 100644
index e594d073e..000000000
--- a/frontend/app/components/range_slider/BUILD
+++ /dev/null
@@ -1,29 +0,0 @@
-load("//defs:defs.bzl", "xprof_ng_module")
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-
-package(default_visibility = ["//frontend:internal"])
-
-xprof_ng_module(
-    name = "range_slider",
-    srcs = [
-        "range_slider.ts",
-        "range_slider_module.ts",
-    ],
-    assets = [
-        ":range_slider_css",
-        "range_slider.ng.html",
-    ],
-    deps = [
-        "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
-    ],
-)
-
-sass_binary(
-    name = "range_slider_css",
-    src = "range_slider.scss",
-    sourcemap = False,
-    deps = [
-        "@org_xprof//frontend/app/styles:common",
-    ],
-)
diff --git a/frontend/app/components/range_slider/README.md b/frontend/app/components/range_slider/README.md
deleted file mode 100644
index 69e2ef5f4..000000000
--- a/frontend/app/components/range_slider/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Range Slider
-<range-slider> allows for the selection of a range from a slider via mouse, touch, or keyboard.
-
-## Selecting a range
-By default the minimum value of the slider is 0, the maximum value is 100, and the thumb moves in increments of 1. These values can be changed by setting the `min`, `max`, and `step` attributes respectively. The initial range's row is set to the minimum value and range's high is set to the maximum value unless otherwise specifiled.
-```
-<range-slider min="1" max="5" step="0.5" [rangeValue]="{low: 2.5, high: 3.5}"></range-slider>
-```
-
-## Handling an event
-Whenever the range value changes, a change event is emitted. Events have low and high values.
-```
-<range-slider (change)="handleEvent($event.low, $event.high)"></range-slider>
-
-handleEvent(low: number, high: number) {...}
-```
diff --git a/frontend/app/components/range_slider/range_slider.ng.html b/frontend/app/components/range_slider/range_slider.ng.html
deleted file mode 100644
index 7255ea2d6..000000000
--- a/frontend/app/components/range_slider/range_slider.ng.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="range-slider-wrapper">
-  <mat-slider (input)="updateFirstSliderValue($event.value)"
-              [min]="min"
-              [max]="max"
-              [step]="step"
-              [value]="firstSliderValue">
-  </mat-slider>
-  <mat-slider (input)="updateSecondSliderValue($event.value)"
-              [min]="min"
-              [max]="max"
-              [step]="step"
-              [value]="secondSliderValue">
-  </mat-slider>
-  <div #range class="range">
-    <div #rangeBar class="range-bar"></div>
-  </div>
-</div>
diff --git a/frontend/app/components/range_slider/range_slider.scss b/frontend/app/components/range_slider/range_slider.scss
deleted file mode 100644
index a7529f31f..000000000
--- a/frontend/app/components/range_slider/range_slider.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-/** CSS for a range slider component. */
-
-@import 'frontend/app/styles/common';
-
-:host {
-  display: inline-block;
-  height: 48px;
-  min-width: 128px;
-}
-
-.range-slider-wrapper {
-  position: relative;
-  height: 48px;
-}
-
-.range {
-  display: inline-block;
-  position: absolute;
-  width: calc(100% - 16px);
-  min-width: 112px;
-  padding: 8px;
-  vertical-align: middle;
-}
-
-.range-bar {
-  position: absolute;
-  height: 2px;
-  top: 23px;
-  left: 28px;
-  right: 48px;
-  background-color: #e8710a;
-}
-
-mat-slider {
-  position: absolute;
-  width: 100%;
-}
-
-::ng-deep mat-slider .mat-slider-track-fill,
-::ng-deep mat-slider .mat-slider-track-background {
-  /* stylelint-disable-next-line declaration-no-important */
-  background-color: #dbdbdb !important;
-}
diff --git a/frontend/app/components/range_slider/range_slider.ts b/frontend/app/components/range_slider/range_slider.ts
deleted file mode 100644
index c5a676689..000000000
--- a/frontend/app/components/range_slider/range_slider.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
-
-/** The base interface for range value. */
-export interface RangeValue {
-  low: number;
-  high: number;
-}
-
-const PADDING = 8;
-
-/** A range slider component. */
-@Component({
-  selector: 'range-slider',
-  templateUrl: './range_slider.ng.html',
-  styleUrls: ['./range_slider.scss']
-})
-export class RangeSlider implements OnInit, OnChanges {
-  /** The maximum value that the slider can have. */
-  @Input() max = 100;
-
-  /** The minimum value that the slider can have. */
-  @Input() min = 0;
-
-  /** The values at which the thumb will snap. */
-  @Input() step = 1;
-
-  /** Range value of the slider. */
-  @Input() rangeValue: RangeValue = {low: 0, high: 100};
-
-  /** Event emitted when the slider value has changed. */
-  @Output() change = new EventEmitter<RangeValue>();
-
-  @ViewChild('range', {static: true}) rangeRef!: ElementRef;
-
-  @ViewChild('rangeBar', {static: true}) rangeBarRef!: ElementRef;
-
-  firstSliderValue = 0;
-  secondSliderValue = 100;
-
-  ngOnInit() {
-    this.onResize();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    this.firstSliderValue = Math.min(this.rangeValue.low, this.rangeValue.high);
-    this.secondSliderValue =
-        Math.max(this.rangeValue.low, this.rangeValue.high);
-    this.updateValues();
-  }
-
-  @HostListener('window:resize')
-  onResize() {
-    this.updateRangeBar();
-  }
-
-  updateFirstSliderValue(value: number) {
-    this.firstSliderValue = value || 0;
-    this.updateValues();
-  }
-
-  updateSecondSliderValue(value: number) {
-    this.secondSliderValue = value || 0;
-    this.updateValues();
-  }
-
-  updateValues() {
-    this.rangeValue.low =
-        Math.min(this.firstSliderValue, this.secondSliderValue);
-    this.rangeValue.high =
-        Math.max(this.firstSliderValue, this.secondSliderValue);
-    this.updateRangeBar();
-    this.change.emit(this.rangeValue);
-  }
-
-  updateRangeBar() {
-    const rangeWidth = this.rangeRef.nativeElement.clientWidth - PADDING * 2;
-    const left = Math.max(
-                     0,
-                     rangeWidth * (this.rangeValue.low - this.min) /
-                         (this.max - this.min)) +
-        PADDING;
-    const right = Math.max(
-                      0,
-                      rangeWidth * (this.max - this.rangeValue.high) /
-                          (this.max - this.min)) +
-        PADDING;
-    this.rangeBarRef.nativeElement.style.left = String(left) + 'px';
-    this.rangeBarRef.nativeElement.style.right = String(right) + 'px';
-  }
-}
diff --git a/frontend/app/components/range_slider/range_slider_module.ts b/frontend/app/components/range_slider/range_slider_module.ts
deleted file mode 100644
index 6d8cf0c35..000000000
--- a/frontend/app/components/range_slider/range_slider_module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
-
-import {RangeSlider} from './range_slider';
-
-/** A range slider component module. */
-@NgModule({
-  declarations: [RangeSlider],
-  imports: [MatLegacySliderModule],
-  exports: [RangeSlider]
-})
-export class RangeSliderModule {
-}
diff --git a/frontend/styles.scss b/frontend/styles.scss
index 9e9054972..54af1dfc0 100644
--- a/frontend/styles.scss
+++ b/frontend/styles.scss
@@ -37,6 +37,11 @@ $theme: mat.define-light-theme(
 @include mat.select-theme($theme);
 @include mat.menu-theme($theme);
 @include mat.dialog-theme($theme);
+@include mat.progress-spinner-theme($theme);
+@include mat.progress-bar-theme($theme);
+@include mat.slide-toggle-theme(map-merge($theme, (density: -5)));
+@include mat.radio-theme($theme);
+@include mat.slider-theme($theme);
 
 html, body {
   height: 100%;