Wie aktualisiert man HTML5-Bereich bei Änderung einer Texteingabe?

Question

Ich habe eine html5-Bereichseingabe und eine Textfeldeingabe. Wenn sich der Bereich ändert, wird das Textfeld aktualisiert. Aber was soll ich tun, damit, wenn ich eine Zahl in das Textfeld einfüge, der Bereichseingang aktualisiert wird?

Dies ist mein aktueller Code:

<div> 
<input id="slider" type="range" min="0" max="200" /> 
<input id="box" type="text" value="0"/> 
</div> 

<script> 
var slider = document.getElementById('slider'); 
$('#box').change(function(){slider.value=parseInt(this.value)}); 
</script> 

Wenn ich meine Textbox, mein Schieber (Bereichseingang) bearbeiten nicht ändert. Was mache ich falsch? Kann es sein, dass ich slider.value nicht verwenden sollte, um den Schieberegler zu aktualisieren? Wenn das der Grund ist, was ist der richtige Weg, das zu tun?

Answer 1

This fiddle works:

var slider = document.getElementById('slider'); 
$('#box').change(function(){ 
    slider.value=parseInt(this.value); 
}); 

(Also das ist Ihr aktueller Code, tatsächlich Haben Sie die jQuery-Bibliothek importieren.?)
Beachten Sie, dass Sie die Reichweite des Schiebereglers festgelegt haben, um 200 einige Werte Versuchen zwischen 0 und 200.

Answer 2

Es ist eigentlich ziemlich einfach. Es ist alles in jQuery Tools API documentation geschrieben. Also habe ich meinen Code zu diesem geändert und es hat funktioniert:

<div> 
<input id="slider" type="range" min="0" max="200" /> 
<input id="box" type="text" value="0"/> 
</div> 
<script> 
var sliderapi = $("#slider").data("rangeinput"); 
$('#box').change(function(){sliderapi.setValue(parseInt(this.value))}); 
</script> 

Answer 3

in meiner Seite habe ich es in nur Javascript und Hinzufügen eines Onchange-Ereignisses.

Ich habe auch den Wert = 0 hinzugefügt, damit es am Begin beginnt.

<div> 
<input id="slider" type="range" min="0" max="200" value="0"/> 
<input id="box" type="text" value="0"/> 
</div> 

var slider = document.getElementById('slider'); 
var box = document.getElementById("box"); 

slider.onchange = function(){ 
    box.value = slider.value; 
} 

Und diese hinzufügen, wenn Sie es

box.onkeyup = function(){ 
     slider.value = box.value;  
} ​ 

Answer 4

$('#box').change(function(){ 
    $('#slider').attr({"value":parseInt(this.value)}); 
}); 

funktionieren könnte auf beiden Seiten machen wollen arbeiten.

Answer 5

Es ist ein einfaches Skript, genau dies zu tun:

<label for=range1>Slide, then press "Click to search slider value"</label> 
<span>-1000 </span><input type="range" id="slide1" min="-1000" max="1000" value=0 step=0.25 onchange="printValue('slide1', 'rangeValue1')"><span> 1000 </span> 
<i><input type=text id="rangeValue1" value=0 width=25% onchange="slideValue('slide1', 'rangeValue1');"><span> is the value of the slider now</span></i><br/><br/> 
<script> 
function printValue(sliderID, spanbox) { 
    var x = document.getElementById(spanbox); 
    var y = document.getElementById(sliderID); 
    x.value = y.value; 
} 
function slideValue(sliderID, spanbox){ 
    var x = document.getElementById(spanbox); 
    var y = document.getElementById(sliderID); 
    y.value = parseInt(x.value); 
} 

window.onload = function() { printValue('slide1', 'rangeValue1'); } 

</script> 

(Natürlich funktioniert dies nur, wenn Sie den Wert auf die "onchange" Enter drücken und abschicken)

Answer 6

Hey Everyone Die, die don ‚t wissen, wir keine js oder jquery brauchen für diese

<form> 
 
    <div> 
 
    <input for="amount" oninput="amount.value=rangeInput.value" id="slider" type="range" min="0" max="200" name="rangeInput" /> 
 
    <input oninput="rangeInput.value=amount.value" id="box" type="text" value="0" name="amount" for="rangeInput" oninput="rangeInput.value=amount.value" /> 
 
    </div> 
 
</form>