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. (翻訳中)
Name 概要
material Material Design slider (翻訳中)
シグネチャ 概要
focus() Focuses the range. (翻訳中)
blur() Removes focus from the range. (翻訳中)
focus()

Focuses the range. (翻訳中)

blur()

Removes focus from the range. (翻訳中)

Inputs

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

Outputs

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

お困りですか?

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

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

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