Jak zaktualizować zakres html5 przy zmianie wprowadzania tekstu?

Question

Mam dane wejściowe zakresu html5 i wejście pola tekstowego. Po zmianie zakresu pole tekstowe zostanie zaktualizowane. Ale co mam zrobić, aby po wprowadzeniu numeru w polu tekstowym wprowadzanie zakresu zostało zaktualizowane?

To jest mój bieżący kod:

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

Kiedy edytować pole tekstowe, mój suwak (wejście zakres) nie zmienia się. Co ja robię źle? Czy to możliwe, że nie powinienem używać suwaka.value do aktualizacji suwaka? Jeśli to jest powód, jaki jest właściwy sposób, aby to zrobić?

Answer 1

This fiddle works:

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

(Więc to jest twój aktualny kod, faktycznie importować bibliotekę jQuery.?)
Pamiętaj, że masz ustawiony zakres suwaka do 200. Spróbuj kilka wartości pomiędzy 0 i 200.

Answer 2

To całkiem proste. Wszystko jest napisane w jQuery Tools API documentation. Więc zmieniłem kod do tego i zadziałało:

<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

po mojej stronie zrobiłem to po prostu w JavaScript i dodałem zdarzenie onchange.

Dodałem również wartość = 0 do zakresu, aby zacząć od początku.

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

I dodać to, jeśli chcesz, aby to działało na obu stronach

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

Answer 4

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

może działać.

Answer 5

Jest to prosty skrypt, po prostu to zrobić:

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

(oczywiście, to działa tylko po naciśnięciu klawisza ENTER i dostarczą wartości do "onchange")

Answer 6

Hej wszystkim tych, którzy don „t wiedzieć, że nie potrzebujemy żadnych JS lub jQuery dla tego

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