L'intervallo del tipo di input HTML5 mostra il valore dell'intervallo

114

Sto creando un sito Web in cui desidero utilizzare il dispositivo di scorrimento dell'intervallo (so che supporta solo i browser Webkit).

L'ho integrato completamente e funziona bene. Ma vorrei usare a textboxper mostrare il valore della diapositiva corrente.

Voglio dire, se inizialmente il cursore è al valore 5, quindi nella casella di testo dovrebbe essere visualizzato come 5, quando faccio scorrere il valore nella casella di testo dovrebbe cambiare.

Posso farlo usando solo CSSo html. Voglio evitare JQuery. È possibile?

html  css  range 
— Niraj Chauhan
fonte
1
Non puoi farlo senza javascript.
— mrtsherman
3
Puoi quasi farlo con CSS usando :before/ :after, contente attr(), in questo modo . Tuttavia, gli pseudo-elementi: before /: after consumano effettivamente parte dell'intervallo del cursore (anche se forse è risolvibile) e, cosa più importante, i valori non vengono aggiornati se il cursore viene manipolato. Tuttavia, ho pensato che sarebbe stato interessante lasciarlo qui. Potrebbe diventare possibile in futuro.
— waldyrious
3
La correzione della soluzione di @waldir produce jsfiddle.net/RjWJ8 sebbene utilizzi ancora javascript per aggiornare l'attributo value dalla proprietà.
— user1277170

Risposte:

110

Questo utilizza javascript, non jquery direttamente. Potrebbe aiutarti a iniziare.

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="">
Espandi lo snippet

— ejlepoud
fonte
5
ma c'è comunque da farlo senza javascript o jquery?
— Niraj Chauhan
15
Questo proviene da mobile-web-app.blogspot.com/2012/03/… , ancora javascript. code<label for = "rangeinput"> Intervallo </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>
— ejlepoud
46
Qualcun altro pensa che manchi fornire un cursore cieco. È vero che fornire widget fantasiosi non è il ruolo dello standard di base, ma mostrare il valore selezionato è fondamentale per questo widget, quindi penso che (facoltativamente) mostrare il numero in una forma di base come un suggerimento sulla parte superiore della maniglia di scorrimento sarebbe creare un design migliore.
— Basilea Shishani
1
@BaselShishani Non potrei essere più d'accordo, non sono proprio sicuro di quale fosse il processo di pensiero alla base.
— Noz
2
@BaselShishani: Secondo MDN : "range: un controllo per inserire un numero il cui valore esatto non è importante.". Alla luce di questa ipotesi, non ha senso mostrare alcun valore esatto. Ma in pratica sarà probabilmente utilizzato anche per selezionare valori esatti.
— bodo
166

Per coloro che sono ancora alla ricerca di una soluzione senza un codice javascript separato. C'è una soluzione poco facile senza scrivere una funzione javascript o 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

Se vuoi mostrare il valore nella casella di testo, cambia semplicemente l'output in input.

Aggiornare:

È ancora Javascript scritto nel tuo html, puoi sostituire i collegamenti con il codice JS di seguito:

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

Utilizza l'ID o il nome dell'elemento, entrambi sono supportati nei browser morden.

— Rahul R.
fonte
1
+1 so di sapere di <output>. L'unico problema è che EI non lo supporta però. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx
4
È ancora javascript ed è peggio associare un input all'elemento del modulo che all'elemento di input stesso.
— cuixiping
2
@cuixiping, possiamo associare l'input all'elemento invece del modulo, l'ho fatto solo per mostrare un esempio.
— Rahul R.
Perdona questa domanda tarda e noob, ma come fa il gestore a fare riferimento a rangeInput e amount con i loro nomi HTML?
— rep_movsd
@rep_movsd, è uguale a this.formName.rangeInput o this.formName.amount. Modulo di accesso agli elementi utilizzando il loro nome. Tuttavia non sono sicuro al 100%,
— Rahul R.
39

versione con input modificabile:

<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
fonte
6
Sostituisci le variabili del modulo con this.nextElementSiblingo this.previousElementSiblinge sostituisci oninput con onchange per ottenere una versione che funziona al di fuori di un modulo. jsfiddle.net/Xjxe6/94
— Domino
32

un modo ancora migliore sarebbe quello di catturare l'evento di input sull'input stesso piuttosto che sull'intero modulo (in termini di prestazioni):

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

Ecco un violino (con l' idaggiunta secondo il commento di Ryan).

— Ilana Hakim
fonte
3
In Firefox 27, questo non ha funzionato per me fino a quando non ho aggiunto anche id="amount"l'output.
— Ryan
questo dovrebbe funzionare senza ID:oninput="this.form.amount.value=this.value"
— d1Mm
1
funziona ma come faccio ad arrivare al valore corrente e a mostrarlo quando la pagina si aggiorna? : - /
— user2513846
14

Se desideri che il tuo valore corrente venga visualizzato sotto il cursore e si muova insieme ad esso, prova questo:

<!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>
Espandi lo snippet

Nota che questo tipo di elemento di input HTML ha una funzione nascosta, ad esempio puoi spostare il cursore con i tasti freccia sinistra / destra / giù / su quando l'elemento è attivo. Lo stesso con i tasti Home / End / PageDown / PageUp.

— Drugan
fonte
6

Se stai usando più diapositive e puoi usare jQuery, puoi fare quanto segue per gestire facilmente più cursori:

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">
Espandi lo snippet

Inoltre, utilizzando oninputsu <input type='range'>riceverai eventi mentre trascini l'intervallo.

— António Almeida
fonte
5

La versione più breve, senza form, mino JavaScript esterno.

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

— gengns
fonte
1
questa è la risposta migliore ...
— Ayo Adesina
2

Per le persone che non si preoccupano dell'uso di jquery, ecco una breve strada senza usare alcun 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
fonte
1

Ho una soluzione che coinvolge (Vanilla) JavaScript, ma solo come libreria. Devi includerlo una volta e poi tutto ciò che devi fare è impostare l' sourceattributo appropriato degli input numerici.

L' sourceattributo dovrebbe essere il querySelectorAllselettore dell'intervallo di input che desideri ascoltare.

Funziona anche con selectcs. E funziona con più ascoltatori. E funziona nell'altra direzione: cambia il numero di input e l'input dell'intervallo si adatterà. E funzionerà su elementi aggiunti successivamente nella pagina (controlla https://codepen.io/HerrSerker/pen/JzaVQg per questo)

Testato in Chrome, Firefox, Edge e 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>
Espandi lo snippet

— yunzen
fonte
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>
Espandi lo snippet

— luis
fonte
1
Errore: {"message": "Uncaught ReferenceError: getvalor is not defined", "filename": " stacksnippets.net/js ", "lineno": 12, "colno": 169}
— Darush
0

Prova questo :

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

e nella sezione jQuery :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });
— mamal
fonte
-3

se stai ancora cercando la risposta puoi usare input type = "number" al posto di type = "range" min max work se impostato in questo ordine:
1-name
2-maxlength
3-size
4-min
5-max
solo copialo

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— kyo adam
fonte
1
Questo è semplicemente sbagliato, non fa ciò che lo starter dell'argomento ha richiesto.
— bolvo
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.