La plage de type d'entrée HTML5 affiche la valeur de la plage

114

Je crée un site Web sur lequel je souhaite 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 très bien. Mais je voudrais utiliser un textboxpour afficher la valeur actuelle de la diapositive.

Je veux dire si initialement le curseur est à la valeur 5, donc dans la zone de texte, il devrait apparaître comme 5, lorsque je fais glisser la valeur dans la zone de texte doit changer.

Puis-je faire cela en utilisant uniquement CSSou html. Je veux éviter JQuery. C'est possible?

html css range Niraj Chauhan
la source
1
Vous ne pouvez pas faire cela sans JavaScript.
mrtsherman
3
Vous pouvez presque le faire avec css en utilisant :before/ :after, contentet attr(), comme ceci . Cependant, les pseudo-éléments: before /: after mangent en fait une partie de la plage du curseur (bien que cela puisse peut-être être corrigé), et surtout, les valeurs ne sont pas mises à jour si le curseur est manipulé. Néanmoins, j'ai pensé qu'il serait intéressant de laisser cela ici. Cela pourrait devenir possible à l'avenir.
waldyrious
3
La correction de la solution de @waldir entraîne jsfiddle.net/RjWJ8 bien qu'elle utilise toujours javascript pour mettre à jour l'attribut value de la propriété.
user1277170

Réponses:

110

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="">
Développer l'extrait

ejlepoud
la source
5
mais est-il possible de le faire sans javascript ou jquery?
Niraj Chauhan
15
Ceci est de mobile-web-app.blogspot.com/2012/03/… , toujours javascript. code<label for = "rangeinput"> Range </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>
ejlepoud
46
Quelqu'un d'autre pense-t-il qu'il manque un curseur aveugle. Il est vrai que fournir des widgets sophistiqués n'est pas le rôle de la norme de base, mais montrer la valeur sélectionnée est au cœur de ce widget, donc je pense que (éventuellement) afficher le numéro sous une forme de base telle qu'une info-bulle au-dessus de la poignée du curseur faire un meilleur design.
Basel Shishani
1
@BaselShishani Je ne pouvais pas être plus d'accord, je ne sais pas vraiment quel était le processus de réflexion derrière cela.
Noz
2
@BaselShishani: Selon MDN : "range: Un contrôle pour entrer un nombre dont la valeur exacte n'est pas importante.". À la lumière de cette hypothèse, il est logique de ne montrer aucune valeur exacte. Mais en pratique, il sera probablement également utilisé pour sélectionner des valeurs exactes.
bodo
166

Pour ceux qui recherchent toujours une solution sans code javascript séparé. Il y a peu de solution simple 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>

Démo JsFiddle

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

Mettre à jour:

Il s'agit toujours de Javascript écrit dans votre html, vous pouvez remplacer les liaisons par le code JS ci-dessous:

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

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

Rahul R.
la source
1
+1 sais que je connais <output>. Le seul problème est que l'IE ne le soutient pas. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
radbyx
4
C'est toujours du javascript, et il est pire de se lier à l'entrée sur l'élément de formulaire que sur l'élément d'entrée lui-même.
cuixiping
2
@cuixiping, nous pouvons lier l'entrée sur l'élément au lieu de la forme, je l'ai juste fait pour montrer l'exemple.
Rahul R.
Pardonnez cette question tardive et noob, mais comment le gestionnaire fait-il référence à rangeInput et à montant par leurs noms HTML?
rep_movsd
@rep_movsd, c'est la même chose que this.formName.rangeInput ou this.formName.amount. Le formulaire accède aux éléments en utilisant leur nom. Cependant, je ne suis pas sûr à 100%,
Rahul R.
39

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/

d1Mm
la source
6
Remplacez les variables de formulaire par this.nextElementSiblingou this.previousElementSiblinget remplacez oninput par onchange pour obtenir une version qui fonctionne en dehors d'un formulaire. jsfiddle.net/Xjxe6/94
Domino
32

un moyen encore meilleur serait d'attraper l'événement d'entrée sur l'entrée elle-même plutôt que sur le formulaire entier (en termes de performances):

<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 l' idajout selon le commentaire de Ryan).

Ilana Hakim
la source
3
Dans Firefox 27, cela n'a pas fonctionné pour moi jusqu'à ce que j'aie ajouté id="amount"pour la sortie, aussi.
Ryan
cela devrait fonctionner sans identifiant:oninput="this.form.amount.value=this.value"
d1Mm
1
cela fonctionne, mais comment puis-je accéder à la valeur actuelle et l'afficher lorsque la page s'actualise? : - /
user2513846
14

Si vous voulez que votre valeur actuelle soit affichée sous le curseur et se déplace avec elle, 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>
Développer l'extrait

Notez que ce type d'élément d'entrée HTML a une fonctionnalité masquée, telle que vous pouvez déplacer le curseur avec les touches fléchées gauche / droite / bas / haut lorsque l'élément a le focus. La même chose avec les touches Accueil / Fin / PageDown / PageUp.

drugan
la source
6

Si vous utilisez plusieurs diapositives et que vous pouvez utiliser jQuery, vous pouvez effectuer les opérations suivantes 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">
Développer l'extrait

De plus, en utilisant oninputsur, <input type='range'>vous recevrez des événements tout en faisant glisser la plage.

António Almeida
la source
5

Version sans Shortest form, minou JavaScript externe.

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>
Développer l'extrait

gengns
la source
1
c'est la meilleure réponse ...
Ayo Adesina
2

Pour les gens qui ne se soucient pas de l'utilisation de jquery, voici un court chemin sans utiliser d'identifiant

<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>
hexaJer
la source
1

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

L' sourceattribut doit être lequerySelectorAll sélecteur de l'entrée de plage que vous souhaitez écouter.

Cela fonctionne même avec les selectcs. Et cela fonctionne avec plusieurs auditeurs. Et cela fonctionne dans l'autre sens: changez l'entrée de nombre et l'entrée de gamme s'ajustera. Et cela fonctionnera sur les éléments ajoutés plus tard sur la page (consultez 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>
Développer l'extrait

yunzen
la source
0 

<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>
Développer l'extrait

Luis
la source
1
Erreur: {"message": "Uncaught ReferenceError: getvalor is not defined", "filename": " stacksnippets.net/js ", "lineno": 12, "colno": 169}
Darush
0

Essaye ça :

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

et dans la section jQuery :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });
Mamal
la source
-3

si vous cherchez toujours la réponse, vous pouvez utiliser input type = "number" à la place de type = "range" min max work s'il est défini dans cet ordre:
1-name
2-maxlength
3-size
4-min
5-max
just le copier

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
kyo adam
la source
1
C'est tout simplement faux, cela ne fait pas ce que le sujet a demandé.
bolvo