jqueryプラグイン knob.jsを使って、ドアノブ風に回して数値を入力。

マウスカーソルを円内に置いて、ドラッグすると円グラフ風のスライダが動いて数値を決めることができます。input要素を利用して画像化しているので、そのまま入力データを取り出せます。また、数値部分を選択して、直接数値の入力も可能です。下の例では、扱う数値が0から100までになっていますので101以上を入力しても100になります。デザインやサイズはinput属性に付加されたパラメーターで変更できます。
 canvasを使用して描画しているため、IEの対応は9以上になります。
data-width="75"
data-fgColor="#fff"
data-skin="tron"
data-displayPrevious=true
            
data-width="110"
data-fgColor="#fff"
data-skin="tron"
data-thickness=".2"
data-displayPrevious=true
            
data-width="130"
data-fgColor="#fff"
data-skin="tron"
data-thickness=".1"