Bereich Eingabe mit Textfeld

Question

Vielen Dank für Ihre Zeit!

Ich sehe so etwas aus: Demo1. - http://www.html5tutorial.info/html5-range.php

Ich habe dies, aber es funktioniert nicht.

<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>

Danke an alle!

Answer 1

Sie sind in Ihrem script..Please finden die folgenden code.your Schieber fehlt arbeitet

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>

Answer 2

Sie sind ganz in der Nähe mit diesem Code. Das einzige Problem ist, dass Sie das oninput-Attribut auf das falsche Element gesetzt haben.

Sie möchten auf den Bereichsschieberegler reagieren, nicht auf das Wertfeld.

bewegen dies dem valR Element (und die Änderung der ID zu reflektieren, dass wir jetzt Rangevalue bevöl) sollten Sie den Code beheben:

<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

Answer 3

Das ist viel einfacher sollution

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