Is there any way to listen to changes on an input range in Angular 2?

Question

I'm developing an app with Angular 2.0, and I don't know how to listen to an input range changes.

Here's the component:

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

@Component({
  selector: 'zoom-slider',
  styleUrls: [
    './zoom-slider.style.scss'
  ],
  template: `
    <div class="zoom-slider">
      <input type="range" max="5" (click)="changeZoom"/>
    </div>
  `
})
export class ZoomSlider {

  changeZoom() {
    console.log('change slider');
  }

}

This doesn't work.

Thanks in advance!

Answer 1

You need to listen for the change event and have a reference to the input.

<input type="range" #ref (change)="changeZoom(ref.value)"/>

changeZoom(value: number) { ... }

Answer 2

I guess one of these should work

<input type="range" max="5" (input)="changeZoom($event)"/>
<input type="range" max="5" (change)="changeZoom($event)"/>

If you pass the function as above (click) might work as well.