web-dev-qa-db-fra.com

Obtenir Angular Valeur du curseur du matériau v2 en glissant

J'utilise Angular Material v2 md-slider dans un composant

@Component({
  selector: 'ha-light',
  template: `<md-slider min="0" max="1000" step="1" 
             [(ngModel)]="myValue" (change)="onChange()"></md-slider>
             {{myValue}}`,
  styleUrls: ['./light.component.css']
})
export class LightComponent implements OnInit {
  myValue = 500;

  constructor() { }

  ngOnInit() { }

  onChange(){
    console.log(this.myValue);
  }
}

et myValue met à jour très bien et la méthode onChange est appelée, mais seulement lorsque j’arrête de glisser et relâche le bouton de la souris.

Existe-t-il un moyen de mettre à jour myValue et d’appeler la fonction lorsque je fais glisser le curseur?

J'ai remarqué l'attribut aria-valuenow qui change au fur et à mesure que je glisse, mais je ne sais pas trop comment l'utiliser pour ce dont j'ai besoin (s'il peut être utilisé du tout).

angularangular-material2
5
Marek

Excellente question. Nous avons récemment ajouté cette fonctionnalité au matériau 2.

Vous pouvez vous attendre à la nouvelle fonctionnalité de Material beta.2

Vous n'écouteriez plus l'événement (change), mais plutôt sur l'événement (input).

<mat-slider (input)="onInputChange($event)"></mat-slider>

onInputChange(event: any) {
  console.log("This is emitted as the thumb slides");
}
18
DevVersion

J'essayais d'obtenir une valeur mat-slider à l'intérieur de mon composant, et je l'ai obtenue en utilisant event.value comme indiqué ci-dessous. Soumis cette réponse pour aider quelqu'un comme moi :) Merci 

<md-slider (input)="onInputChange($event)"></md-slider>

onInputChange(event: any) {
  console.log(event.value);
}

1
user2662006