title: Smooth sliding mat-slider that snaps to ticks
body: <p>I am trying to get the angular mat-slider to smoothly slide, but when released snaps to the nearest tick.</p>
  
  <p>I have a semi-working demo here: <a href="https://github.com/Jeff-Stapleton/Snapping-Mat-Slider" rel="nofollow noreferrer">https://github.com/Jeff-Stapleton/Snapping-Mat-Slider</a></p>
  
  <p>I define my slider like so:</p>
  
  <pre><code>&lt;mat-slider
      class="example-margin"
      [disabled]="disabled"
      [invert]="invert"
      [max]="2"
      [min]="0"
      [step]="0.02"
      [tick-interval]="50"
      [(ngModel)]="value"&gt;
  &lt;/mat-slider&gt;
  </code></pre>
  
  <p>I do a 2-way data binding on the <code>value</code> I try to intercept the setting and getting of the value to ensure that the value is always rounded to the nearest tick:</p>
  
  <pre><code>get value(): number {
    return Math.round(this._value);
  }
  
  set value(v) {
    if (this.task !== undefined) {
      this.task.unsubscribe();
    }
    this.task = Observable.interval(500).subscribe(() =&gt; {
      v = Math.round(Number(v));
      this._value = v;
    });
  }
  </code></pre>
  
  <p>I even went as far as setting up and interval to ensure my changes always took effect. However, even now, it only works about 90% of the time. The slider will stay where it's at when released instead of snapping to the nearest tick. When I inspect the <code>value</code> in the developer tools it is correctly rounded to the nearest tick but the slider isn't reflecting the ngModels current state.</p>