HTML5-Eingabetypbereich zeigt den Bereichswert an

114

Ich erstelle eine Website, auf der ich den Bereichsregler verwenden möchte (ich weiß, dass er nur Webkit-Browser unterstützt).

Ich habe es vollständig integriert und funktioniert gut. Ich möchte aber a verwenden textbox, um den aktuellen Folienwert anzuzeigen.

Ich meine, wenn der Schieberegler anfangs den Wert 5 hat, sollte er im Textfeld als 5 angezeigt werden, wenn ich den Wert im Textfeld schiebe, sollte er sich ändern.

Kann ich das nur mit CSSoder machen html? Ich möchte vermeiden JQuery. Ist es möglich?

html  css  range 
— Niraj Chauhan
quelle
1
Sie können dies nicht ohne Javascript tun.
— Mrtsherman
3
Sie können fast dies mit css :before/ :after, contentund attr()wie diese . Die Pseudo-Elemente: before /: after verschlingen jedoch tatsächlich einen Teil des Bereichs des Schiebereglers (obwohl dies möglicherweise behoben werden kann), und vor allem werden die Werte nicht aktualisiert, wenn der Schieberegler manipuliert wird. Trotzdem hielt ich es für interessant, dies hier zu belassen. Es könnte in Zukunft möglich werden.
— Waldyrious
3
Das Reparieren der Lösung von @waldir führt zu jsfiddle.net/RjWJ8, obwohl immer noch Javascript verwendet wird, um das Wertattribut aus der Eigenschaft zu aktualisieren.
— user1277170

Antworten:

110

Dies verwendet Javascript, nicht direkt jquery. Es könnte Ihnen beim Einstieg helfen.

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="">
Erweitern Sie das Snippet

— ejlepoud
quelle
5
aber gibt es trotzdem etwas ohne javascript oder jquery zu tun?
— Niraj Chauhan
15
Dies ist von mobile-web-app.blogspot.com/2012/03/… , immer noch 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
Ist jemand der Meinung, dass es an der Bereitstellung eines blinden Schiebereglers mangelt? Es stimmt, dass das Bereitstellen ausgefallener Widgets nicht die Rolle des Basisstandards ist, aber das Anzeigen des ausgewählten Werts ist der Kern dieses Widgets. Daher denke ich, dass (optional) das Anzeigen der Nummer in einer Basisform, z. B. einem Tooltip über dem Schieberegler, dies tun würde für ein besseres Design sorgen.
— Basel Shishani
1
@BaselShishani Konnte nicht mehr zustimmen, nicht wirklich sicher, was der Denkprozess dahinter war.
— Noz
2
@BaselShishani: Laut MDN : "Bereich: Ein Steuerelement zur Eingabe einer Zahl, deren genauer Wert nicht wichtig ist." In Anbetracht dieser Annahme ist es sinnvoll, keinen genauen Wert anzugeben. In der Praxis wird es aber wahrscheinlich auch zur Auswahl exakter Werte verwendet.
— Bodo
166

Für diejenigen, die noch nach einer Lösung ohne separaten Javascript-Code suchen. Es gibt keine einfache Lösung, ohne eine Javascript- oder JQuery-Funktion zu schreiben:

<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

Wenn Sie den Wert im Textfeld anzeigen möchten, ändern Sie einfach die Ausgabe in Eingabe.

Aktualisieren:

Es ist immer noch Javascript in Ihrem HTML geschrieben, Sie können die Bindungen durch folgenden JS-Code ersetzen:

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

Verwenden Sie entweder die ID oder den Namen des Elements. Beide werden in Morden-Browsern unterstützt.

— Rahul R.
quelle
1
+1 weiß, dass ich über <Ausgabe> Bescheid weiß. Das einzige Problem ist, dass EI es jedoch nicht unterstützt. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx
4
Es ist immer noch Javascript und es ist schlimmer, eine Eingabe an das Formularelement zu binden als an das Eingabeelement selbst.
— Cuixiping
2
@cuixiping, wir können einen Eingang für ein Element anstelle eines Formulars binden. Ich habe es nur getan, um ein Beispiel zu zeigen.
— Rahul R.
Verzeihen Sie diese späte und unkomplizierte Frage, aber wie verweist der Handler auf rangeInput und die Menge anhand seiner HTML-Namen?
— rep_movsd
@rep_movsd, es ist dasselbe wie this.formName.rangeInput oder this.formName.amount. Formular Zugriff auf die Elemente mit ihrem Namen. Ich bin mir jedoch nicht 100% sicher,
— Rahul R.
39

Version mit bearbeitbarer Eingabe:

<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
quelle
6
Ersetzen Sie Formularvariablen durch this.nextElementSiblingoder this.previousElementSiblingund ersetzen Sie oninput durch onchange, um eine Version zu erhalten, die außerhalb eines Formulars funktioniert. jsfiddle.net/Xjxe6/94
— Domino
32

Ein noch besserer Weg wäre, das Eingabeereignis eher auf der Eingabe selbst als auf dem gesamten Formular zu erfassen (in Bezug auf die Leistung):

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

Hier ist eine Geige (mit dem idgemäß Ryans Kommentar hinzugefügten).

— Ilana Hakim
quelle
3
In Firefox 27 hat dies bei mir nicht funktioniert, bis ich es auch id="amount"für die Ausgabe hinzugefügt habe.
— Ryan
Dies sollte ohne ID funktionieren:oninput="this.form.amount.value=this.value"
— d1Mm
1
Dies funktioniert, aber wie komme ich zum aktuellen Wert und zeige ihn an, wenn die Seite aktualisiert wird? : - /
— user2513846
14

Wenn Sie möchten, dass Ihr aktueller Wert unter dem Schieberegler angezeigt wird und sich mit diesem bewegt, versuchen Sie Folgendes:

<!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>
Erweitern Sie das Snippet

Beachten Sie, dass diese Art von HTML-Eingabeelement eine versteckte Funktion hat, z. B. können Sie den Schieberegler mit den Pfeiltasten nach links / rechts / unten / oben bewegen, wenn das Element den Fokus darauf hat. Gleiches gilt für die Tasten Home / End / PageDown / PageUp.

— Drugan
quelle
6

Wenn Sie mehrere Folien verwenden und jQuery verwenden können, können Sie die folgenden Schritte ausführen, um problemlos mit mehreren Folien umzugehen:

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">
Erweitern Sie das Snippet

Auch indem Sie oninputauf die <input type='range'>finden Sie Veranstaltungen erhalten , während der Bereich ziehen.

— António Almeida
quelle
3

Kürzeste Version ohne form, minoder externen JavaScript.

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

— gengns
quelle
1
Dies ist die beste Antwort ...
— Ayo Adesina
2

Für Leute, die sich nicht für die Verwendung von Abfragen interessieren, ist hier ein kurzer Weg ohne Verwendung einer 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>
— hexaJer
quelle
1

Ich habe eine Lösung, die (Vanilla) JavaScript beinhaltet, aber nur als Bibliothek. Sie müssen es einmal einschließen, und dann müssen Sie nur noch das entsprechende sourceAttribut für die Zahleneingaben festlegen .

Das sourceAttribut sollte der querySelectorAllSelektor der Bereichseingabe sein, die Sie anhören möchten.

Es funktioniert sogar mit Selectcs. Und es funktioniert mit mehreren Hörern. Und es funktioniert in die andere Richtung: Ändern Sie die Zahleneingabe und die Bereichseingabe wird angepasst. Und es funktioniert mit Elementen, die später auf der Seite hinzugefügt werden (siehe https://codepen.io/HerrSerker/pen/JzaVQg ).

Getestet in Chrome, Firefox, Edge und 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>
Erweitern Sie das Snippet

— Yunzen
quelle
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>
Erweitern Sie das Snippet

— Luis
quelle
1
Fehler: {"message": "Ungefangener Referenzfehler: getvalor ist nicht definiert", " filename ": " stacksnippets.net/js ", "lineno": 12, "colno": 169}
— Darush
0

Versuche dies :

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

und im Abschnitt jQuery :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });
— Säugetier
quelle
-3

Wenn Sie immer noch nach der Antwort suchen, können Sie anstelle von type = "range" die Eingabetyp = "number" verwenden. min max work, wenn in dieser Reihenfolge festgelegt:
1-name
2-maxlength
3-size
4-min
5-max
just Kopiere es

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— Kyo Adam
quelle
1
Dies ist einfach falsch, es macht nicht das, was der Themenstarter angefordert hat.
— Bolvo
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.