Ausgabe auch HTML eingeben?

Question

Ich möchte input type = "range" verwenden, die den Wert ausgibt, aber da die Benutzer bestimmte Werte eingeben möchten, sollte es auch einen Eingabetyp = "number" haben. Gibt es eine Möglichkeit, den Wert des Bereichs in einem Eingabefeld auszugeben (oder auf andere Weise?).

Dies ist der Code, den ich bisher habe (kann nicht scheinen, die Ausgabe irgendwie auch zu arbeiten).

<form onsubmit="return false" oninput="litre.value = (height.valueAsNumber * width.valueAsNumber * depth.valueAsNumber)/1000"> 

Height <input type="range" min="135" max="500" id="height" value="200" oninput="outputDimension(value)"/> 
<output for="height">135</output> 

Width <input type="range" min="135" max="500" id="width" value="250" oninput="outputUpdate(value)" /> 

Depth <input type="range" min="10" max="100" id="depth" value="45" oninput="outputUpdate(value)" /> 


<div id="sidebar"> 
    <p>Litre: 
     <output name="litre" for="height width depth">2250</output> 
    </p> 
</div> 
</form> 

Answer 1

Vielleicht ist es das, was Sie meinen. Überprüfen Sie den folgenden Code. Drücken Sie nach Eingabe der Nummer in das Feld enter.

function updateTextInput(val) { 
 
     document.getElementById('textInput').value=val; 
 
    } 
 

 
function updateRange(val) { 
 
     document.getElementById('range').value=val; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="range" type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">              
 
    <input type="text" id="textInput" value="" onchange="updateRange(this.value);">