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 @@
+ [step]="1" #ngSlider>
Channel id
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
- 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.
-```
-
-```
-
-## Handling an event
-Whenever the range value changes, a change event is emitted. Events have low and high values.
-```
-
-
-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 @@
-
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();
-
- @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 90e8b8484..92239fe53 100644
--- a/frontend/styles.scss
+++ b/frontend/styles.scss
@@ -41,6 +41,8 @@ $theme: mat.define-light-theme(
@include mat.progress-bar-theme($theme);
@include mat.slide-toggle-theme(map-merge($theme, (density: -5)));
@include mat.radio-theme($theme);
+@include mat.snack-bar-theme($theme);
+@include mat.slider-theme($theme);
html, body {
height: 100%;