スイッチ/スライダー-flip switch/slider
①スイッチ - flip switch
☆ソース
<label for="switch">スイッチ:</label>
<select name="flip" id="switch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
labelのforとinputのidを一致させます(ここではswitch)。
デモ
デモ
②スライダー - slider
☆ソース
<label for="slider">スライダー1:</label>
<input type="range" name="slider" id="slider" value="25" min="0" max="100" step="5" />
<label for="slider">スライダー2:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="150" step="10" data-highlight="true"/>
valueが初期値,minが最小値,maxが最大値,stepが増減値をそれぞれ表します。
デモ
デモ