Htykuut

I'm trying to control the audio volume with a material slider. Just like the YouTube audio slider. I use two way data binding like this:

  <mat-slider min="0" max="1" step="0.01" [(value)]="settingsService.audioTick.volume"></mat-slider>

The problem is, the value will only get updated when I stop dragging the slider. Which is a bad user experience because I don't immediately hear if that is a good volume. So I somehow need to do data binding while dragging.

Here is a StackBlitz: https://stackblitz.com/angular/rojampjmlap

Any Idea?

You can use the [value] property binding syntax to pass someValue as an @Input to MatSlider. MatSlider has an @Output property defined named input that gets triggered when the input value changes. You can listen to that and simply re-assign whatever is returned as the $event data to someValue.

Here, give this a try:

Template:

<mat-slider 

  (input)="someValue = $event.value" 

  [value]="someValue">

</mat-slider>



{{ someValue }}

Component:

import {Component} from '@angular/core';



@Component({...})

export class SliderOverviewExample {

  someValue = 0;

}

Here's an Updated Sample StackBlitz for your ref.

You need to bind to the input Output property to get the live data change. Example:

<mat-slider

  min="0"

  max="1"

  step="0.01"

  (input)="settingsService.audioTick.volume = $event.value"

  [value]="settingsService.audioTick.volume" />