CODEWITHSUNDEEP
angularangular-material
Jonas
Jonas

Reputation: 7885

Angular Material Slider Data Binding while dragging

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?

Upvotes: 2

Views: 2746

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 4

Teddy Sterne
Teddy Sterne

Reputation: 14221

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" />

Upvotes: 3

Related Questions