HTML5新要素 input type="range"

概要

input type="range"タグについて説明します。

内容

input type="range"は範囲入力欄です。

属性として以下の利用が可能です
max = 最大値を設定
min = 最小値を設定
step = ステップ幅を設定。

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>input type="range"</title>
  </head>
  <body>
  <form action="">
    range：<input type="range" name="range" id="range" value="20" max="100" min="0" style="width:200px;" required step="10" />
    <input type="submit" name="" value="submit" />
    <input type="submit" name="" value="check_value" onclick="alert(document.getElementById('range').value);" />
  </form>
  </body>
</html>