HTML5のinput[type="range"]を使うと、スライド式の入力ができて、見た目もちょっと気の利いた雰囲気を出せます。このタイプの入力だけなら、手をマウスからキーボードに持ち換える必要もありません。反面、デフォルトのままでは入力数値が見えないという欠点があります。「とても嫌い、嫌い、どちらでもない、好き、とても好き」のようなアナログ的でアバウトな入力ならまだしも、年齢、身長といった細かい数値の入力には無理があります。

そこで、input[type="range"]の数値を表示する方法です。このサンプルでは、jQueryでスライダーの位置を割り出し、そこへCSSでフキダシを描いて数値を表示しています。

（２）の部分のhtmlソース

<input id="bob" name="bob" type="range" min=15 max=120 value=85  step=5 style="width: 35%;">
  <output for="bob">1</output>　<span>（２）最小値：15　最大値：120　初期値：85　増減単位：5</span>

scriptソース

$(function() {
	   var el, newPoint, newPlace, offset;
	   $("input[type='range']").change(function() {
	     el = $(this);
	     width = el.width();
	     newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
	     offset = -1.3;
	     if (newPoint < 0) { newPlace = 0;  }
	     else if (newPoint > 1) { newPlace = width; }
	     else { newPlace = width * newPoint + offset; offset -= newPoint;}
	     el
	       .next("output")
	       .css({
	         left: newPlace,
	         marginLeft: offset + "%"
	       })
	       .text(el.val());
	   })
	   .trigger('change');
	});