title: angular reset value for mat-slider within mat-table
body: <p>I have a list of sliders rendered in a Mat table, and a final slider is displaying the total. I need to reset the value to 0 if it is moved and the total is greater than 100. It works perfectly fine if I release the mouse within the slider element, but if I release the mouse little bit outside the element, value is not reset. </p>
  
  <p>I need to access to the matSlider by reference or id to set the value in the mat-table. but I couldn't find a way to achieve this.</p>
  
  <p>I have attached the code of whatever I have tried so far and also a link to stackblitz for the same. Can anyone help? thanks.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-c8njsu-aqznqv?file=src%2Fapp%2Ftable-basic-example.ts" rel="nofollow noreferrer">link to stackblitz</a></p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
  
      &lt;!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" --&gt;
  
      &lt;!-- Position Column --&gt;
      &lt;ng-container matColumnDef="position"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/td&gt;
      &lt;td mat-footer-cell *matFooterCellDef&gt;
          total value slider
      &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Name Column --&gt;
      &lt;ng-container matColumnDef="name"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Slider &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;
              &lt;mat-slider (input)="element.value = $event.value" (onChange)="change(element)" (mouseup)="change(element)"
                  (pointerup)="change(element)" (slideend)="change(element)" [ngModelOptions]="{standalone: true}"
                   [max]="element.max" [(ngModel)]="element.value" [min]="element.min"&gt;
              &lt;/mat-slider&gt;
        {{element.value}}
          &lt;/td&gt;
      &lt;td mat-footer-cell *matFooterCellDef&gt;
              &lt;mat-slider [disabled]="true" #slider [max]="100" [min]="0" [value]="getTotal()"&gt;&lt;/mat-slider&gt;
        {{getTotal()}}
      &lt;/td&gt;
  
      &lt;/ng-container&gt;
  
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-footer-row *matFooterRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  
  &lt;/table&gt;
  
  
  
  &lt;!-- Copyright 2019 Google LLC. All Rights Reserved.
      Use of this source code is governed by an MIT-style license that
      can be found in the LICENSE file at http://angular.io/license --&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>    import {Component} from '@angular/core';
  
      export interface PeriodicElement {
        name: string;
        id: number;
        max: number;
        min: number;
        value : number;
      }
  
      const ELEMENT_DATA: PeriodicElement[] = [
      {id:1,name:"test1",max:100,min:0,value:0},
      {id:2,name:"test2",max:100,min:0,value:40},
      {id:3,name:"test3",max:100,min:0,value:50},
      ];
  
      /**
       * @title Basic use of `&lt;table mat-table&gt;`
       */
      @Component({
        selector: 'table-basic-example',
        styleUrls: ['table-basic-example.css'],
        templateUrl: 'table-basic-example.html',
      })
      export class TableBasicExample {
        displayedColumns: string[] = ['position', 'name'];
        dataSource = ELEMENT_DATA;
  
      change($event:any){
        console.log($event.value);
  
        if(this.getTotal() &gt; 100){
          console.log('total is greater than 100');
  
          $event.value = 0
        }
      }
  
      getTotal(){
  
        return (this.dataSource.map(t =&gt; t.value).reduce((acc, value) =&gt; +acc + +value, 0));
      }
  
      }
  
  
      /**  Copyright 2019 Google LLC. All Rights Reserved.
          Use of this source code is governed by an MIT-style license that
          can be found in the LICENSE file at http://angular.io/license */
  </code></pre>