HTML5 input type range show range value

Question

Je suis en train de créer un site Web où je veux utiliser un curseur de gamme (je sais qu'il ne supporte que les navigateurs webkit).

Je l'ai intégré complètement et il fonctionne bien. Mais je voudrais utiliser un textbox pour afficher la valeur actuelle de la diapositive.

Je veux dire que si initialement le curseur est à la valeur 5, donc dans la boîte de texte il devrait montrer comme 5, quand je glisse la valeur dans la boîte de texte devrait changer.

Puis-je le faire en utilisant seulement CSS o html . Je veux éviter JQuery . Est-ce possible ?

Answer 1

Version la plus courte sans form , min ou JavaScript externe.

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>

Explication

Si vous voulez récupérer la valeur du output vous utilisez couramment un id qui peuvent être liés à partir du oninput au lieu d'utiliser this.nextElementSibling.value (on profite de quelque chose que l'on utilise déjà)

Comparez l'exemple ci-dessus avec cette réponse valable mais un peu plus complexe et longue :

<input id="num" type="range" value="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output>0</output>

Avec la réponse la plus courte :

• Nous évitons l'utilisation de this quelque chose de bizarre en JS pour les nouveaux arrivants
• Nous évitons le nouveau concept de connexion des frères et sœurs dans le DOM.
• Nous évitons d'avoir trop d'attributs dans le input placer le id en el output

Notas

• Dans les deux exemples, nous n'avons pas besoin d'ajouter l'élément min lorsqu'elle est égale à 0
• Suppression de l'option JavaScript this le mot-clé en fait une meilleure langue

Answer 2

Si vous utilisez plusieurs diapositives et vous pouvez utiliser jQuery, vous pouvez faire ce qui suit pour gérer facilement plusieurs curseurs :

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

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

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

De plus, en utilisant oninput sur le <input type='range'> vous recevrez des événements tout en traînant la gamme.

Answer 3

Pour les personnes qui ne se soucient pas de l'utilisation de jquery, voici une méthode courte sans utiliser d'id.

<label> userAvatar :
  <input type="range" name="userAvatar" min="1" max="100" value="1"
         onchange="$('~ output', this).val(value)" 
         oninput="$('~ output', this).val(value)">
  <output>1</output>
</label>

Answer 4

J'ai une solution qui implique (Vanilla) JavaScript, mais seulement en tant que bibliothèque. Vous devez l'inclure une fois, puis tout ce que vous avez à faire est de définir les paramètres appropriés de la bibliothèque. source de l'attribut des entrées numériques.

El source doit être l'attribut querySelectorAll de l'entrée de gamme que vous souhaitez écouter.

Il fonctionne même avec les selectcs. Et ça marche avec des écouteurs multiples. Et cela fonctionne dans l'autre sens : modifiez l'entrée du nombre et l'entrée de la plage s'adaptera. Et elle fonctionne sur les éléments ajoutés ultérieurement dans la page (voir https://codepen.io/HerrSerker/pen/JzaVQg pour cela)

Testé dans Chrome, Firefox, Edge et IE11

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

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

Answer 5

Essayez ceci :

 <input min="0" max="100" id="when_change_range" type="range">
 <input type="text" id="text_for_show_range">

et en jQuery section :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });