スイッチ/スライダー-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が増減値をそれぞれ表します。

 デモ