Campo input tipo 'range' con visualizzatore del valore live

Il campo input di tipo range consente all'utente di specificare un valore numerico che non deve essere inferiore a un valore dato e non superiore a un altro valore specificato.

Pubblicato da ,
Ultima modifica

Questo è un esempio di campo input tipo range

Codice HTML

 <input type="range" min="0" max="11">

min e max sono rispettivamente il valore minomo e il valore massimo:

in questo articolo vi illustrerò due esempi di "range live", uno con visualizzatore classico e uno con visualizzatore a fumetto. 

Per in primo esempio (visualizzatore classico) prendo in considerazione il seguente input:

Codice HTML

 <input id="range" type="range" min="0" max="1000" step="1"> 
<span id="valBox">0</span>

il #valBox è il visualizzatore live del valore del range, l'input è impostato con un valore min="0" e un valore max="1000", step="1", step indica l'unità, cioè a quanto equivale uno step del campo input.

l codice CSS per la formattazione è il seguente:

Codice CSS

 input#range 
{ 
height: 40px; 
width: 250px; 
} 

span#valBox 
{ 
width: 40px; 
height: 40px; 
position: absolute; 
top: 2px; 
text-align: center; 
font-size: 22px; 
font-weight: bold; color: red; 
}

a questo punto con poche righe di codice javascript si ottiene il visualizzatore live del valore del range:

Codice JavaScript

 $(document)
.ready(function(){ 
$('#range').val(0); 

/** mousemove */ 
$('#range')
.mousemove(function(){ 
$('#valBox').html($(this).val()); 
}); 
/** mousemove */ });

Adesso vediamo come ottenere lo stesso effetto per in un visualizzatore a fumetto.

Prendo in considerazione questo codice

Codice HTML

 <div class="box">
<div id="valBox">0</div> 
<input id="range" type="range" min="0" max="1000" step="1"> 
</div>

il div#box è il contenitore principale, div#valBox è, come nell'esempio precedente, il visualizzatore live del valore del range, i valori min e max del tag input sono impostati come nell'esempio precedente.

Il codice CSS per la formattazione è il seguente:

Codice CSS

 div.box
{ 
width: 200px; 
height: 80px; 
margin: auto; 
margin-top: 50px; 
position: relative; 
} 

#valBox
{ 
left: -25px; 
position: absolute; 
display: block; 
padding: 8px; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
width: 50px; 
height: 30px; 
background-color: #000; 
border-radius: 5px; 
color: #fff; 
text-align: center; 
}
 
#valBox:before 
{ 
content: ""; 
position: absolute; 
width: 0; 
height: 0; 
border-top: 10px solid #000; 
border-left: 5px solid transparent; 
border-right: 5px solid transparent; 
top: 100%; 
left: 50%; 
margin-left: -5px; 
margin-top:-1px; 
} 

input#range 
{ 
width: 200px; 
position: relative; 
margin-left: 0px; 
margin-top: 40px; 
}

#valBox:before è la punta del contenitore #valBox.

Posizionati correttamente tutti i nostri elementi della pagina, andiamo a creare uno script che ci consenta di avere l'effetto voluto, lo script che ho sviluppato a questo proposito è il seguente:

Codice JavaScript

 $(document).ready(function(){ 
var valore = $('#range').val(0); 
var min = $('#range').attr('min'); 
var max = $('#range').attr('max'); 
var lungh = $('#range').width(); 
var left= -25; 
$('#range').mousemove(function(){ 
var val = $(this).val(); 
$('#valBox').html(val) ; 

if(val==0){ 
$('#valBox').css({'left':left+'px'}) 
}else{ 
$('#valBox').css({'left':left+(lungh/(max/val))+'px'}) 
} 
});

la variabile leff coincide con il margin-left del contenitore #valBox. 

 

Demo