OnsRange Directive (ons-range)

<ons-range>要素のAngularディレクティブです。

実例

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';
  }

関連情報

属性

名前 型 / デフォルト値 概要
disabled 無効化されている場合にtrueOptional.

プロパティ概要

名前 概要
disabled 無効化されている場合にtrue
value Current value. (翻訳中)

プリセットのmodifier

Name 概要
material Material Design slider (翻訳中)

Inputs

名前 概要
value {string} ons-range要素に対する入力値を指定します。

Outputs

名前 概要
valueChange {string} 値が変更された時に発火します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。