ons-range

実例

Range sliders

The <ons-range> element is used to display a slider.

There are several attributes that can be used to customize the behavior of the element. Most of these are the same attributes as those that can be used for <input type="range"> elements.

To set the maximum and minimum and maximum value the min and max attributes are used. The step attribute can be used to change how much the value changes every step.

The element can be disabled using the disabled attribute.

Getting the value

To get the current value of the slider you need to get a reference to the DOM element and read the value property.

var range = document.getElementById('range-1');
ons.notification.alert('Value is ' + range.value);

関連情報

名前 型 / デフォルト値 概要
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. (翻訳中)

お困りですか?

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

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

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