JavaScriptを：別の要素にリンクする入力範囲の挙動

Question

私は<span>のleft値が比例<input>に親指の動きと一致していることを順番に<div>内部<span>を制御<input type="range">を必要とするプロジェクトの作業です。つまり、親指が<input>の最後に到達すると、<span>は<div>の末尾に達し、親指が先頭に移動すると<span>となります。私はたくさんのものを試しましたが、私が望むようなものは何もありません。私はスマートでエレガントな数学の解決策があると確信していますが、私はそれでうまくいきません...あなたは私を助けることができますか？

P.S：可能であれば、私は単純なJavaScriptで何かをしたいと思います。

Example in codepen

Answer 1

一般化ファウストの答え、

var range = document.getElementById('range'), 
 
    fake = document.getElementById('fake-range'), 
 
    parent = fake.parentElement; 
 
function renderFake() { 
 
    var available = parent.clientWidth - fake.offsetWidth, 
 
     ratio = (range.value - range.min)/(range.max - range.min); 
 
    fake.style.left = ratio * available + 'px'; 
 
} 
 
range.addEventListener('input', renderFake); 
 
window.addEventListener('resize', renderFake);

.wrap { 
 
    background-color: #99c; 
 
    height: 10px; 
 
    position: relative; 
 
} 
 
#fake-range { 
 
    background-color: #000; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 10px; 
 
}

<input id="range" type="range" min="0" max="196" value="0"> 
 
<div class="wrap"> 
 
    <span id="fake-range"></span> 
 
</div>

Answer 2

はここhttp://codepen.io/anon/pen/GZwxzx

<input id="range" onchange="updateFakeRange(this.value);" type="range" min="0" max="196" value="0"> 

<div class="wrap"> 
    <span id="fake-range"></span> 
</div> 

お知らせ入力にonchange="updateFakeRange(this.value);" ...シンプルなJSを使用してソリューションです。

var inputRange = document.getElementById("range"); 
var fakeRange = document.getElementById("fake-range"); 
function updateFakeRange(value) { 
    value = value * 100/196; 
    fakeRange.style.left = value + "%"; 
} 

これは楽しいことでしたが、これはコードリクエストであり実際の質問ではないことを考慮しています。