値を変更し続ける移動ストライプ

Question

私は自分のウェブサイト上で動くストライプ（名前を付ける方法はわかりません）を作成する必要があります。このような何か：

|--@---------| 

そして、@を別の側面からユーザが移動することができ、バーをクリックしたときに、それは値を送信しますが、ユーザーが選択したので、それはマニュアルの要求で行うことができません送信する値。私はちょうど私がこれをする方法をいくつかのヒントが必要です。私はそれがフラッシュで行うことができると思うが、私はインターネット検索のキーワードがそれについてのより多くの情報を見つけるために使用されるべきであるかどうかわからない。

Answer 1

ワイナージュが示唆しているように、タイプrangeの<input>はおそらく単純な解決策です。以下の例を参照してください。

document.addEventListener('DOMContentLoaded', function() { 
 
    var slider = document.getElementById('rangeValue'); 
 
    var output = document.getElementById('valueOutput'); 
 

 
    function updateOutput() { 
 
     output.innerHTML = slider.value; 
 
    } 
 

 
    //set the value initially 
 
    updateOutput(); 
 

 
    //subscribe to any change/drag - not supported by IE 
 
    slider.addEventListener('input', updateOutput); 
 

 
    //use change event for updates when drag is ended 
 
    slider.addEventListener('change', updateOutput); 
 
});

<input id="rangeValue" type="range" name="rangeValue" value="3" max="10" /> 
 
<div>Value: <span id="valueOutput"></span></div>