Как отфильтровать ценовой диапазон с помощью кнопки «Применить», используя угловой материал в angular6

Question

Мой ожидаемый результат - когда пользователь выбирает начальную и конечную цену, основываясь на том, что я хочу отобразить здесь продукт, я не хочу кнопку, используя сам мат-слайдер, я хочу отсортировать продукты.поэтому, пожалуйста, помогите мне сделать это?.
HTML

    <mat-slider min="0" max="500" step="10" #statprice (input)="start($event)"></mat-slider>
    <mat-slider min="0" max="1000" step="10" #endprice (input)="end($event)"></mat-slider>
 <div> {{ statprice.value }} </div>
 <div> {{ endprice.value }}  </div>

Component.ts

 import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    import { Product, Category } from "../../app.models";
    import { HttpClientModule,HttpClient } from '@angular/common/http';
    @Component({
      selector: 'app-products',
      templateUrl: './products.component.html',
      styleUrls: ['./products.component.scss']
    })
    export class ProductsComponent implements OnInit {
      data1 = 0;
      data2 = 0;
      constructor(private activatedRoute: ActivatedRoute, 
        public appService:AppService, 
        private router: Router,
        private httpService: HttpClient) {}
       start(event: any) {
        this.data1 = event;
        console.log(this.data1 );
         }
         end(event: any) {
           this.data2 = event;
        console.log(this.data2 );
         }

      ngOnInit() {}      

    }

Answer 1

Использование (изменение) или (входное) событие.

<md-slider (input)="onInputChange($event)"></md-slider> onInputChange(event: any) { console.log("This is emitted as the thumb slides"); }