rangeslider

このエントリーをはてなブックマークに追加

data-role=”rangeslider”は2つの値の間隔を指定できるスライダーが作成できる属性です。

jQuery Mobileはtype属性「range」をもつinput要素を、値を特定の値の間から選択できるスライダーに変換しますが、rangesliderは2つの値が選択できます。

data-role=”rangeslider”ではtype属性「range」をもつinput要素を2つ設置しそれぞれに同じmin属性とmax属性を指定します。それぞれにlabel要素でラベルが指定できますがrangesliderのラベルには最初に指定したlabel要素が採用されます。

<div data-role="rangeslider">
    <label for="range-1a">Rangeslider:</label>
    <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
    <label for="range-1b">Rangeslider:</label>
    <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>

sample

jQuery Mobile 1.3.0での追加/変更

data-role="rangeslider"はjQuery Mobile 1.3.0で追加された属性です。

参考URL

Rangeslider - jQuery Mobile Demos

登録日 : 2013年03月03日 最終更新日 : 2016年12月19日

同じカテゴリー(data-role)のエントリー

検索

スポンサードリンク

バージョン

リファレンス