Как иметь ползунок цены внутри диалогового окна в Angular?

Question

Я хочу разработать ползунок цены, похожий на снимок экрана ниже в Angular.

Price.dialog.html:-

      
       Price
       thumbLabel
       [displayWith]="formatLabel"
       tickInterval="1000"
       min="1"
       max="100000">  

Price.dialog.ts: -

   import {Component, OnInit} from '@angular/core';
   import {MatSliderModule} from '@angular/material/slider';

   @Component({
   selector: 'app-myprice',
   templateUrl: './price.ng.html',
   styleUrls: ['./price.css'],
   })
   export class Myprice implements OnInit {
    formatLabel(value: number) {
    if (value >= 1000) {
      return Math.round(value / 1000) + 'k';
    }

    return value;
    }
    ngOnInit() {}
   }

Parent.component.ts: -

    openPrice() {
    const ref = this.dialog.open(
        Myprice, {panelClass: 'my-price', backdropClass: 'backdropBack'});
    }

Как передать данные из Компонент цены для родительского компонента без необходимости закрывать диалоговое окно, поскольку набор цен будет фильтровать список ниже.

Пожалуйста, дайте мне знать, есть ли другой способ достичь того же.