Range

ons-range要素は、range要素をラップしたコンポーネントです。ons-range要素を利用することでモバイルでのrange UIを作成することができます。

value双方向バインディングを使うことで、ons-rangeの値を指定したり変更を受け取ったりすることができます。

  @Component({
    selector: 'app',
    template: `
    <div>
      <ons-range modifier="material" [(value)]="value"></ons-range><br>
      Value: {{value}}
    </div>
    `
  })
  export class AppComponent {
    value: string = '10';
  }

ドラッグ中に値の変更を検知する

ons-rangeの双方向バインディングでは、値の変更が通知されるのはons-rangeのコントロールを動かし終わったときです。もし動かしている最中に値の変更を受け取りたい場合には、(input)イベントバインディングを次のように記述します。

  @Component({
    selector: 'app',
    template: `
    <div>
      <ons-range modifier="material" [(value)]="value" (input)="value = $event.target.value"></ons-range><br>
      Value: {{value}}
    </div>
    `
  })
  export class AppComponent {
    value: string = '10';
  }