web-dev-qa-db-fra.com

Valeur de plage d'affichage de la plage de type d'entrée HTML5

Je suis en train de créer un site Web sur lequel je veux utiliser le curseur de plage (je sais qu’il ne prend en charge que les navigateurs Webkit).

Je l'ai complètement intégré et fonctionne bien. Mais j'aimerais utiliser une zone de texte pour afficher la valeur de la diapositive actuelle.

Je veux dire que si initialement le curseur est à la valeur 5, dans la zone de texte, il doit afficher 5, lorsque je glisse la valeur dans la zone de texte doit changer.

Puis-je faire cela en utilisant uniquement CSS ou HTML. Je veux éviter JQuery. C'est possible?

html5css3range
84
Niraj Chauhan

Cela utilise javascript, pas jquery directement. Cela pourrait vous aider à démarrer.

function updateTextInput(val) {
          document.getElementById('textInput').value=val; 
        }
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">

82
ejlepoud

Pour ceux qui recherchent encore une solution sans code javascript séparé. Il n’ya guère de solution facile sans écrire une fonction javascript ou jquery:

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

Si vous souhaitez afficher la valeur dans une zone de texte, modifiez simplement la sortie en entrée.

Mettre à jour:

C'est toujours du Javascript écrit dans votre html, vous pouvez remplacer le liaisons avec code JS ci-dessous:

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

Utilisez l'identifiant ou le nom de l'élément, les deux sont pris en charge dans les navigateurs classiques.

134
Rahul R.

version avec entrée modifiable:

<form>
    <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
    <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>

http://jsfiddle.net/Xjxe6/

31
d1Mm

une méthode encore meilleure serait d’accepter l’événement d’entrée sur l’entrée elle-même .__

<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 la variable id ajoutée conformément au commentaire de Ryan).

17
Ilana Hakim

Si vous souhaitez que votre valeur actuelle soit affichée sous le curseur et se déplace avec, essayez ceci:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MySliderValue</title>

</head>
<body>
  <h1>MySliderValue</h1>

  <div style="position:relative; margin:auto; width:90%">
    <span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
    <span id="myValue"></span>
    </span>
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> 
  </div>

  <script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px =  ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);

  myValue.parentElement.style.left = px + 'px';
  myValue.parentElement.style.top = myRange.offsetHeight + 'px';
  myValue.innerHTML = myRange.value + ' ' + myUnits;

  myRange.oninput =function(){
    let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
    myValue.innerHTML = myRange.value + ' ' + myUnits;
    myValue.parentElement.style.left = px + 'px';
  };
  </script>

</body>
</html>

Notez que ce type d'élément d'entrée HTML possède une fonctionnalité masquée, par exemple vous pouvez déplacer le curseur avec les touches de direction gauche/droite/bas/haut lorsque l'élément est actif. Même chose avec les clés Home/End/PageDown/PageUp.

12
drugan

Si vous utilisez plusieurs diapositives et que vous pouvez utiliser jQuery, vous pouvez procéder comme 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 faisant glisser la plage.

4
Toni Almeida

<form name="registrationForm">
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
    <input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>

0
luis

J'ai une solution qui implique (Vanilla) JavaScript, mais uniquement en tant que bibliothèque. Vous devez l'inclure une fois, puis il vous suffit de définir l'attribut source approprié des entrées numériques.

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

Cela fonctionne même avec selectcs. Et cela fonctionne avec plusieurs auditeurs. Et cela fonctionne dans l'autre sens: changez le nombre et l'entrée de la plage sera ajustée. Et cela fonctionnera avec les éléments ajoutés plus tard sur la page (vérifiez https://codepen.io/HerrSerker/pen/JzaVQg pour cela)

Testé sous 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>
0
yunzen