diff --git a/src/dev-app/slider/BUILD.bazel b/src/dev-app/slider/BUILD.bazel
index 07cca109687a..c85f7bbf7387 100644
--- a/src/dev-app/slider/BUILD.bazel
+++ b/src/dev-app/slider/BUILD.bazel
@@ -10,8 +10,10 @@ ng_module(
":slider_demo_scss",
],
deps = [
+ "//src/material/button",
"//src/material/button-toggle",
"//src/material/checkbox",
+ "//src/material/dialog",
"//src/material/slider",
"//src/material/tabs",
"@npm//@angular/forms",
diff --git a/src/dev-app/slider/slider-demo.html b/src/dev-app/slider/slider-demo.html
index 120e4df53c07..96369f760f49 100644
--- a/src/dev-app/slider/slider-demo.html
+++ b/src/dev-app/slider/slider-demo.html
@@ -180,4 +180,10 @@
+
+
+
+
+
+
diff --git a/src/dev-app/slider/slider-demo.scss b/src/dev-app/slider/slider-demo.scss
index fcb87f1c6efa..3d35411de5d2 100644
--- a/src/dev-app/slider/slider-demo.scss
+++ b/src/dev-app/slider/slider-demo.scss
@@ -46,3 +46,11 @@
min-width: 300px;
margin-top: 30px;
}
+
+.demo-dialog-trigger-container {
+ padding: 25px 0;
+ text-align: center;
+}
+.demo-dialog-content {
+ overflow: visible;
+}
diff --git a/src/dev-app/slider/slider-demo.ts b/src/dev-app/slider/slider-demo.ts
index ba70cbbde41f..1860463753ba 100644
--- a/src/dev-app/slider/slider-demo.ts
+++ b/src/dev-app/slider/slider-demo.ts
@@ -6,12 +6,20 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {Component} from '@angular/core';
+import {Component, Inject} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSliderModule} from '@angular/material/slider';
import {MatTabsModule} from '@angular/material/tabs';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialog, MatDialogModule, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatButtonModule} from '@angular/material/button';
+
+interface DialogData {
+ color: string;
+ discrete: boolean;
+ showTickMarks: boolean;
+}
@Component({
selector: 'slider-demo',
@@ -19,8 +27,10 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
standalone: true,
imports: [
FormsModule,
- MatCheckboxModule,
+ MatButtonModule,
MatButtonToggleModule,
+ MatCheckboxModule,
+ MatDialogModule,
MatSliderModule,
MatTabsModule,
ReactiveFormsModule,
@@ -49,6 +59,8 @@ export class SliderDemo {
control = new FormControl('0');
+ constructor(public dialog: MatDialog) {}
+
updateValue(input: EventTarget | null): void {
if (!input) {
return;
@@ -91,4 +103,35 @@ export class SliderDemo {
}
(input as HTMLInputElement).checked ? this.control.disable() : this.control.enable();
}
+ openDialog() {
+ this.dialog.open(SliderDialogDemo, {
+ data: {
+ color: this.colorModel,
+ discrete: this.discrete,
+ showTickMarks: this.showTickMarks,
+ },
+ });
+ }
+}
+
+@Component({
+ selector: 'slider-dialog-demo',
+ styleUrls: ['slider-demo.css'],
+ template: `
+
Slider in a dialog
+
+
+
+
+
+
+
+
+
+ `,
+ standalone: true,
+ imports: [MatDialogModule, MatSliderModule],
+})
+export class SliderDialogDemo {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}