基本設定
<input type='text' data-jogshuttle>

stepを指定
<input type='text' step='5' data-jogshuttle>

小数のstep
<input type='text' step='.1' data-jogshuttle>

サイズを指定
<input type='text' data-jogshuttle='size:100'>

min、maxを指定
<input type='text' min='-10000' max='10000' data-jogshuttle>

ジョグダイヤルのサイズをUIに対して100%に指定(シャトルリングは完全に隠れる)
<input type='text' data-jogshuttle='jog-ratio:1'>

ジョグダイヤルのサイズを0%に指定(シャトルリングのみになる)
<input type='text' data-jogshuttle='jog-ratio:0'>

UIの色関連パラメータを指定
<input type='text' data-jogshuttle='jog-ratio:0.6;jog-color:#448844;jog-background:#ffffff;shuttle-color:#448844;shuttle-background:rgba(240,255,240,0.75)'>

背景色として画像を指定
<input type='text' data-jogshuttle='jog-ratio:1; jog-background:center/150% no-repeat url(https://akebi.jp/photo/080429/img/25.jpg); jog-color:transparent'>

type='range'への適用
<input type='range' min='0' max='10000' style='width:100%' data-jogshuttle>

type='number'への適用
<input type='number' min='0' max='1000' step='5' data-jogshuttle>

type='button'への適用
<input type='button' min='0' max='10000' data-jogshuttle>

onclickで元要素をdisabledに設定
<input type='text' onclick='this.disabled=true' data-jogshuttle>

readonlyを指定
<input type='text' readonly data-jogshuttle>

oninput、onchangeを併用して別要素へ値を反映させる例
<div style='width:100%; height:8px; border:1px brown solid;'>
 <div id='progress' style='background:red; width:0%; height:100%;'></div>
</div>

<input type='text' min='0' max='100' step='0.2' oninput='progress.style.width=this.value+"%";' data-jogshuttle='oninput:true'>

<input type='text' min='0' max='100' step='0.2' onchange='progress.style.width=this.value+"%";' data-jogshuttle='onchange:true'>

<div id='palette' style='border:1px brown solid; background:#fff; width:60px; height:30px;'></div>
<script>
 function changePalette(e, c) {
  const color = {
   r: '#ff0000',
   g: '#00ff00',
   b: '#0000ff',
  };
  e.style.background = 'linear-gradient(to right, ' + color[c] + ' ' + e.value/255*100 + '%, #ffffff 0%)';

  palettestyle.background = 'rgb(' +
   palette_r.value + ',' +
   palette_g.value + ',' +
   palette_b.value + ')';
 }
</script>

<input type='text' min='0' max='255' value='255' id='palette_r' oninput='changePalette(this, "r")' style='background:#f00;' data-jogshuttle='oninput:true; jog-color:#fff;shuttle-color:#fff; jog-background:#f88; shuttle-background:#f88;'>
<input type='text' min='0' max='255' value='255' id='palette_g' oninput='changePalette(this, "g")' style='background:#0f0;' data-jogshuttle='oninput:true; jog-color:#fff;shuttle-color:#fff; jog-background:#4c4; shuttle-background:#4c4;'>
<input type='text' min='0' max='255' value='255' id='palette_b' oninput='changePalette(this, "b")' style='background:#00f;' data-jogshuttle='oninput:true; jog-color:#fff;shuttle-color:#fff; jog-background:#88f; shuttle-background:#88f;'>

target-id使用例

<input type='text' id='target01' readonly>
<input type='button' min='0' max='1000' value='OPEN' data-jogshuttle='target-id:target01'>

target-id・oninput併用例

<script>
 function targetIdSample(e, target) {
  const value = (target.value % 1440 + 1440) % 1440;
  target.value = value;
  e.value =
   ("0" + Math.floor(value / 60)).slice(-2) + ":" +
   ("0" + value % 60).slice(-2);
 }
</script>
<input type='hidden' id='time01'>
<input type='text' oninput='targetIdSample(this, time01)' data-jogshuttle='oninput:true; target-id:time01'>

<script>
 function targetIdSample2(e, target) {
  const value = target.value;
  e.value = new Date(value * 864e5).toLocaleDateString('lt');
 }
 window.addEventListener('load', function(){
  document.getElementById('days').value = Date.now() / 864e5;
  targetIdSample2(date01, days);
 });
</script>
<input type='hidden' id='days'>
<input type='text' id='date01' min='-25567' max='47481' oninput='targetIdSample2(this, days)' data-jogshuttle='oninput:true; target-id:days'>

動画コントローラとしての使用サンプル