HTML5 input type range show range value

Question

HTML5 input type range show range value

Demandé el 4 de Avril, 2012: Quand la question a-t-elle été
37092 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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 ?

Demandé el 4 de Avril, 2012 par ntechi

2 votes

Vous ne pouvez pas faire cela sans javascript.

Commenté el 4 de Avril, 2012 par mrtsherman

3 votes

Vous pouvez casi faire cela avec css en utilisant :before / :after , content y attr() comme este . Cependant, les pseudo-éléments :before/:after occupent une partie de la plage du curseur (mais cela peut ê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 ceci ici. Cela pourrait devenir possible à l'avenir.

Commenté el 2 de Juillet, 2013 par waldir

3 votes

En corrigeant la solution de @waldir, on obtient les résultats suivants jsfiddle.net/RjWJ8 bien qu'il utilise toujours le javascript pour mettre à jour l'attribut valeur de la propriété.

Commenté el 20 de Mars, 2014 par user1277170

Answer 1

5 Réponses

Answer 2

308voto

Rahul R. Points 814

Pour ceux qui cherchent encore une solution sans code javascript séparé. Il y a peu de solution facile sans écrire une fonction javascript ou jquery :

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

JsFiddle Demo

Si vous voulez afficher la valeur dans la zone de texte, il suffit de changer la sortie en entrée.

Point à noter : Il s'agit toujours de Javascript écrit dans votre html, nous pouvons écrire quelque chose comme ci-dessous en js pour faire la même chose :

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

Au lieu de l'id de l'élément, on peut aussi utiliser name, les deux étant supportés par les navigateurs modernes.

Répondu el 21 de Septembre, 2013 par Rahul R. (814 Points )

1 votes

+1 je sais que je sais pour <sortie>. Le seul problème est que E.I. ne le supporte pas. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output

Commenté el 14 de Juin, 2014 par radbyx

5 votes

C'est toujours du javascript, et c'est pire de lier oninput sur un élément de formulaire que sur l'élément d'entrée lui-même.

Commenté el 20 de Octobre, 2014 par cuixiping

2 votes

@cuixiping, nous pouvons lier oninput sur l'élément au lieu du formulaire, je l'ai juste fait pour montrer l'exemple.

Commenté el 29 de Octobre, 2014 par Rahul R.

Afficher 9 autres commentaires

Answer 3

143voto

ejlepoud Points 254

Ceci utilise javascript, pas jquery directement. Il peut 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="">

Répondu el 4 de Avril, 2012 par ejlepoud (254 Points )

6 votes

Mais existe-t-il un moyen de le faire sans javascript ou jquery ?

Commenté el 4 de Avril, 2012 par ntechi

16 votes

Cela vient de mobile-web-app.blogspot.com/2012/03/ mais toujours en 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>

Commenté el 4 de Avril, 2012 par ejlepoud

69 votes

Quelqu'un d'autre pense-t-il que le fait de fournir un curseur aveugle est un manque. Il est vrai que la fourniture de widgets fantaisistes n'est pas le rôle de la norme de base, mais l'affichage de la valeur sélectionnée est au cœur de ce widget. Je pense donc que l'affichage (facultatif) du nombre sous une forme de base, comme une info-bulle au-dessus de la poignée du curseur, serait une meilleure conception.

Commenté el 7 de Avril, 2013 par Basel Shishani

Afficher 5 autres commentaires

Answer 4

52voto

d1Mm Points 121

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/

Répondu el 11 de Avril, 2014 par d1Mm (121 Points )

12 votes

Remplacer les variables de formulaire par this.nextElementSibling o this.previousElementSibling et remplacez oninput par onchange pour obtenir une version qui fonctionne en dehors d'un formulaire. jsfiddle.net/Xjxe6/94

Commenté el 23 de Mars, 2015 par Jacque Goupil

1 votes

Une réponse fantastique !

Commenté el 1 de Octobre, 2021 par Systems Rebooter

Answer 5

40voto

Ilana Hakim Points 51

Une meilleure solution serait d'attraper l'événement de saisie sur la saisie elle-même plutôt que sur l'ensemble du formulaire (pour des raisons 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 le id ajouté selon le commentaire de Ryan).

Répondu el 19 de Janvier, 2014 par Ilana Hakim (51 Points )

3 votes

Dans Firefox 27, cela ne fonctionnait pas pour moi jusqu'à ce que j'ajoute id="amount" pour la sortie, aussi.

Commenté el 20 de Mars, 2014 par Ryan

0 votes

Cela devrait fonctionner sans id : oninput="this.form.amount.value=this.value"

Commenté el 11 de Avril, 2014 par d1Mm

1 votes

Cela fonctionne mais comment puis-je obtenir la valeur actuelle et l'afficher lorsque la page est rafraîchie ? :-/

Commenté el 3 de Septembre, 2015 par user2513846

Answer 6

21voto

drugan Points 11

Si vous voulez que votre valeur actuelle soit affichée sous le curseur et qu'elle se déplace avec lui, 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 de saisie HTML possède une fonction cachée, à savoir que vous pouvez déplacer le curseur à l'aide des touches fléchées gauche/droite/bas/haut lorsque l'élément a le focus sur lui. Il en va de même pour les touches Home/End/PageDown/PageUp.

Répondu el 14 de Février, 2016 par drugan (11 Points )

HTML5 input type range show range value

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

HTML5 input type range show range value

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: