Привязка углового матричного слайдера при перетаскивании

Question

Я пытаюсь контролировать громкость звука с помощью ползунка материала.Так же, как аудио слайдер YouTube.Я использую двухстороннее связывание данных следующим образом:

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

Проблема в том, что значение будет обновляться только тогда, когда я перестану перетаскивать ползунок.Что плохо для пользователя, потому что я не сразу слышу, хороший ли это объем.Поэтому мне как-то нужно связывать данные при перетаскивании.

Вот StackBlitz: https://stackblitz.com/angular/rojampjmlap

Любая идея?

Answer 1

Вы можете использовать синтаксис привязки свойства [value] для передачи someValue как @Input в MatSlider.MatSlider имеет свойство @Output с именем input, которое срабатывает при изменении значения input.Вы можете прослушать это и просто переназначить все, что возвращается как $event данные someValue.

Здесь, попробуйте:

Шаблон:

<mat-slider 
  (input)="someValue = $event.value" 
  [value]="someValue">
</mat-slider>

{{ someValue }}

Компонент:

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

@Component({...})
export class SliderOverviewExample {
  someValue = 0;
}

Вот обновленный Образец StackBlitz для вашей ссылки.

Answer 2

Вам необходимо привязать к свойству input Output, чтобы получить изменение данных в реальном времени.Пример:

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