input要素に対してダイヤル/リングの回転操作で数値入力するUI - Qiita

前回の針を直接回して時刻入力するタイムピッカーのつまんで回転させる動作を流用して作成した、数値を扱えるタイプのinput要素に対して回転動作で入力するためのUIです。 操作感覚は映像編集関連入力機器のジョグシャトルをイメージしています。 実物のジョグシャトル(ジョグダイヤル及びシャトルリング)は主に映像編集関連機器でよく使われる、編集ポイントに移動するための送り戻しを自在に行うための入力装置です。 設定方法### scriptタグでjogshuttle.jsを読み込み、適用させたいinputタグにdata-jogshuttle属性を追記します。 基本設定 動作サンプル 設定項目### inputタグ自体の属性#### 適用させるinputタグにmin、max、step属性があれば、UI側でもその値を使用します。 data-jogshuttle属性で設定できる項目#### data-jogs