範囲入力とテキストボックス

こんな感じです：Demo1。 - http://www.html5tutorial.info/html5-range.php

私はこれを持っていますが、動作しません。

<form> 
 
<input id="valR" max="65" min="1" step="1" type="range" value="1"> 
 
<input id="rangeValue" type="text" min="1" max="65" value="1" oninput="this.form.valR.value=this.value"></form> 
 
<div class="tesxsss2"><div id="taxa">Taxa FS Connect: $15.00</div> 
 
<div id="shipping">Priority Mail (frete): 43.51</div>

おかげでみんな！

出典

2017-07-11 Wilson Nuny

あなたはcode.yourスライダの下あなたはこのコードと非常に接近している

let rangeValueElement = document.querySelector('#range'); 
 
document.querySelector('input#valR').addEventListener('change', showVal); 
 

 
function showVal() { 
 
    rangeValueElement.innerText = this.value; 
 
    
 
}

<input id="valR" max="65" min="1" step="1" type="range" value="1"> 
 

 
<span id="range" class="tesxss">1</span>

出典

2017-07-11 15:05:56 user7350714

を働いている見つけるあなたscript..Pleaseに欠けています。唯一の問題は、間違った要素にoninput属性を設定したことです。

値のボックスではなく、範囲スライダに反応したいとします。

あなたのコード修正する必要がありますvalR要素にこれを移動する（そして私たちは今rangeValueを移入していることを反映するために、IDを変更）：

<form> 
    <input id="valR" max="65" oninput="this.form.rangeValue.value=this.value" min="1" step="1" type="range" value="1"> 
    <input id="rangeValue" type="text" oninput="this.form.valR.value=this.value" min="1" max="65" value="1" > 
</form>

check out the pen here

出典

2017-07-11 15:19:03 hairmot

ありがとう！しかし、私は欲しいのと同じように動作しません。私が "RangeValue"の値を変更しようとすると、サムは一緒に行きません。分かりますか？同様に、私は値を変更する場合、親も変更する必要があります。しかし、本当にありがとう！ありがとうございました！ –

これは、あなたのrangeValue要素に入力ハンドラを置いて同じことをするケースです - 更新された答えを見てください – hairmot

これはずっと簡単sollutionを

<input id="valR" max="65" min="1" step="1" type="range" value="1" onchange="this.nextElementSibling.innerText = this.value;"> 
 
<span>1</span>

出典

2017-07-11 15:22:38

範囲入力とテキストボックス

答えて

関連する問題