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

Sto creando un sito Web in cui desidero utilizzare il dispositivo di scorrimento dell'intervallo (so che supporta solo i browser Webkit).Intervallo del tipo di input HTML5 mostra il valore dell'intervallo

L'ho integrato completamente e funziona perfettamente. Ma mi piacerebbe usare una casella di testo per mostrare il valore corrente della diapositiva.

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

Posso farlo utilizzando solo CSS o html. Voglio evitare JQuery. È possibile?

fonte

2012-04-04 Niraj Chauhan

Non è possibile farlo senza javascript. – mrtsherman

È possibile * quasi * farlo con css usando ': before' /': after', 'content' e' attr() ', come [this] (http://jsfiddle.net/hVvK2/). Tuttavia, gli pseudo-elementi: before /: after consumano effettivamente parte dell'intervallo del cursore (anche se forse è correggibile) 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

La soluzione di correzione di @waldir si trova in http://jsfiddle.net/RjWJ8/ sebbene usi ancora javascript per aggiornare l'attributo value dalla proprietà. – user1277170

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

fonte

2012-04-04 04:19:19 ejlepoud

ma c'è comunque da fare senza javascript o jquery? –

+14

Questo è da http://mobile-web-app.blogspot.com/2012/03/easy-display-value-for-of-slider-in.html, ancora javascript. 'code' Intervallo 5 – ejlepoud

+25

Qualcun altro pensa che manchi un cursore cieco. È vero che fornire widget fantastici 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 base come un suggerimento in cima alla maniglia del cursore sarebbe creare un design migliore. –

119

Per coloro che sono ancora alla ricerca di una soluzione senza un codice javascript separata. Non v'è soluzione facile poco 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 si desidera visualizzare il valore nella casella di testo, è sufficiente modificare uscita e ingresso.

Aggiornamento: Id o il nome

It is still Javascript written within your html, you can replace the bindings with below JS code:

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

O dell'elemento uso, sia sono supportati nei browser morden.

fonte

2013-09-21 18:52:05

molto creativo ... –

+1 so che so di . L'unico problema è che E.I non lo supporta però. (W3School) http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_output – radbyx

È ancora javascript, ed è peggio associare oninput sull'elemento form che sull'elemento input stesso. – cuixiping

un modo ancora migliore sarebbe quella di catturare l'evento di input sull'ingresso stesso piuttosto che su tutto il modulo (performance saggio):

<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 fiddle (con la id aggiunto come per il commento di Ryan).

fonte

2014-01-19 11:06:14

In Firefox 27, questo non ha funzionato per me fino a quando ho aggiunto 'id =" amount "' anche per l'output. – Ryan

questo dovrebbe funzionare senza id: 'oninput =" this.form.amount.value = this.value "' – d1Mm

questo funziona, ma come posso ottenere il valore corrente e mostrarlo quando la pagina si aggiorna? : -/ – user2513846

versione con ingresso 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/

fonte

2014-04-11 03:12:31 d1Mm

Sostituisci le variabili del modulo con 'this.nextElementSibling' o' this.previousElementSibling' e sostituisci oninput con onchange per ottenere una versione che funziona al di fuori di un modulo. http://jsfiddle.net/Xjxe6/94/ –

Se si desidera che il valore corrente da visualizzare sotto il cursore e si muove con esso, provate 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>

Si noti che questo tipo di elemento di input HTML ha una funzione nascosta, come ad esempio è possibile spostare il cursore con i tasti freccia sinistra/destra/giù/su quando l'elemento si concentra su di esso. Lo stesso con i tasti Home/Fine/PageDown/PageUp.

fonte

2016-02-14 11:12:47 drugan

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

fonte

2016-10-09 17:11:07 luis

Errore: { "message": "Uncaught ReferenceError: getvalor non definito", "filename": "https://stacksnippets.net/js", " lineno ": 12, " colno ": 169 } – Darush

se ancora cercando la risposta è possibile utilizzare input type = "numero" al posto di type = lavoro min max "range" se impostato in questo ordine:
1 -name
2-maxlength
3-dimensioni
4 min
5-max
basta copiarlo

<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />

fonte

2017-01-18 23:05:11

Se stai usando più diapositive, ed è possibile utilizzare jQuery, si può fare il seguito di trattare con multipli cursori facilmente:

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

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

fonte

2017-07-20 09:21:16

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

risposta

Problemi correlati