スライダを使用すると、数値の範囲から値を選択できます：
スライダーを作成するには、<input type="range"> を使用します：
<form method="post" action="demoform.html">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
Try it Yourself »制限を指定するには、次の属性を使用します：
チップ: スライダボタンに値を表示するには、data-show-value="true" を追加します：
チップ: 値をスライド上にツールチップのようにポップアップするには、data-popup-enabled="true"を追加します：
チップ: スライダの値までのトラックを強調表示するには、data-highlight="true" を追加します：
フリップ・スイッチは、on/off ボタンまたは true/false ボタンによく使用されます：
フリップ・スイッチを作成するには、<input type="checkbox"> を使用し、"flipswitch" を data-role に指定します：
<form method="post" action="demoform.html">
<label for="switch">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Try it Yourself »デフォルトでは、フリップ・スイッチのテキストは "On" と "Off" です。 これを変更するには、data-on-text と data-off-text 属性を使用します：
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False">
Try it Yourself »チップ:事前選択するオプションの 1 つを設定するには、"checked" 属性を使用します：
<input type="checkbox" data-role="flipswitch" name="switch" id="switch"
checked>
Try it Yourself »
範囲スライダ
ユーザはある範囲内の最小値と最大値を指定できる、2つのハンドルを持つスライダを作成する方法。
フリップ・スイッチのスタイル
フリップ・スイッチを広くする方法。