HTML5 type d'entrée plage afficher la plage de valeur

Pour ceux qui sont toujours à la recherche d'une solution sans un code javascript distinct. Il y a peu de solution facile sans l'écriture d'un script javascript ou jquery fonction:

<form name="registrationForm">
   <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
   <output name="ageOutputName" id="ageOutputId">24</output>
</form>

JsFiddle Démo

Si vous souhaitez afficher la valeur dans la zone de texte, il suffit de changer la sortie vers l'entrée.

---

Mise à jour:

Il est encore Javascript écrit dans votre code html, vous pouvez remplacer l'
les liaisons avec ci-dessous code JS:

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
 }

Soit l'utilisation de l'élément d'Id ou nom, les deux sont pris en charge dans morden navigateurs.

une meilleure façon de le faire serait d'attraper l'événement d'entrée sur l'entrée elle-même
plutôt que sur l'ensemble de la forme (performance sage) :

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
       oninput="amount.value=rangeInput.value">                                                       

<output id="amount" name="amount" for="rangeInput">0</output>

Voici un violon (avec le id ajouté par Ryan commentaire).

Si vous utilisez plusieurs diapositives, et vous pouvez les utiliser jQuery, vous pouvez faire le suivi de traiter avec plusieurs curseurs facilement:

JS:

function updateRangeInput(elem) {
$(elem).next().val($(elem).val());
}

CSS:

input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">

Aussi, en utilisant oninput sur le <input type='range'> vous allez recevoir des événements tout en faisant glisser la gamme.

J'ai une solution qui implique (Vanille) en JavaScript, mais seulement comme une bibliothèque. Vous habe d'inclure une seule fois, et puis tout ce que vous devez faire est de définir les source attribut du nombre d'entrées.

La source attribut doit être le querySelectorAll sélecteur de la plage d'entrée que vous souhaitez écouter.

Il fonctionne même avec selectcs. Et il fonctionne avec de nombreux auditeurs. Et ça marche dans l'autre sens: changer le nombre d'entrée et de la plage d'entrée réglage. Et il va travailler sur des éléments ajoutés plus tard sur la page (à vérifier https://codepen.io/HerrSerker/pen/JzaVQg pour qu')

Testé dans Chrome, Firefox, Edge et IE11

JS:

;(function(){
function emit(target, name) {
var event
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(name, true, true);
} else {
event = document.createEventObject();
event.eventType = name;
}
event.eventName = name;
if (document.createEvent) {
target.dispatchEvent(event);
} else {
target.fireEvent("on" + event.eventType, event);
}    
}
var outputsSelector = "input[type=number][source],select[source]";
function onChange(e) {
var outputs = document.querySelectorAll(outputsSelector)
for (var index = 0; index < outputs.length; index++) {
var item = outputs[index]
var source = document.querySelector(item.getAttribute('source'));
if (source) {
if (item === e.target) {
source.value = item.value
emit(source, 'input')
emit(source, 'change')
}
if (source === e.target) {
item.value = source.value
}
}
}
}
document.addEventListener('change', onChange)
document.addEventListener('input', onChange)
}());

HTML:

<div id="div">
<input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
<input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
<br>
<input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<br>
<input name="example3" type="range" max="20" min="0" value="10" step="1">
<select source="[name=example3]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<br>
</div>
<br>