スライダのhtmlコントロールに値が設定されていません

Question

HTMLの範囲入力型について スライダ（範囲入力型）の値をテキストボックスに表示する場合 ただし、テキストボックスの変更値でも同じことが設定されているとスライダの値（範囲入力タイプ）。ここ は、そのためのコード 機能である：

<script type="text/javascript"> 
function updateTextInput(val) { 
document.getElementById('textInput').value=val; 
} 
function updateTextInput2(val) { 
document.getElementById('range1').value = val; 
} 
</script> 

HTML：：

<input type="range" min="0" max="100" value="0" id="range1"  onchange="updateTextInput(this.value);"/> 
    <input type="text" id="textInput" value="0"  onchange="updateTextInput2(this.value);"> 

Answer 1

デバッグupdateTextInput 我々はまた、我々はだけでなく、スライダーをスライドしたときに値がテキストボックスにすぎ 機能を変更することを望みます設定する値を確認する関数です。

または試して

document.getElementById（ 'textInput'）。value = document.getElementById（ 'range1'）。value;

Answer 2

から、〜の入力をに変更する必要があります。 onchangeイベントは、コントロールがフォーカスを失った後、つまりユーザーが何か他のものをクリックした後にのみ発生します。 oninputイベントは、ユーザーがテキストボックスの値を変更するたびに発生します。

あなたのコードは次のようになります。

<input type="range" min="0" max="100" value="0" id="range1" onchange="updateTextInput(this.value);" /> 
<input type="text" id="textInput" value="0" oninput="updateTextInput2(this.value);"> 

あなたのJavaScript関数は、100％の罰金を働いています。

codepenの実例があります。