Come personalizzare un input range con CSS

Input type range di default

Per definizione, gli elementi input di tipo range permettono all’utente di specificare un valore numerico compreso tra un minimo ed un massimo e sono rappresentati dai browser come uno slider.

Il markup è molto semplice, si tratta né più né meno di un elemento <input>, con la particolarità specifica degli attributi min e max che ne determinano gli estremi:

<input type="range" name="range" id="range" min="0" max="100" />

Come per ogni elemento HTML, ogni browser visualizza questo elemento secondo le proprie regole di stile predefinite:

Ti starai chiedendo in quali situazioni potrebbe esserti utile questo tipo di input, vero? La risposta è che ci sono tantissime situazioni in cui può essere utilizzato, come ad esempio:

• Controllo del volume per elementi audio
• Controllo di un intervallo di prezzo in un e-commerce
• Scelta della lunghezza di una password creata da un servizio di generazione password

Selezione di un intervallo di distanza nella mappa di uno store locator

e così via…

Un esempio pratico

A scopo esemplificativo, ipotizza di avere un form in cui hai la necessità di far selezionare all’utente un voto da 1 a 5 da dare ad un articolo, che naturalmente andremo a creare con un input range. Il markup è davvero molto semplice:

<input type="range" name="rate" id="rate" min="1" max="5" />

Come vedi, abbiamo semplicemente specificato il tipo di input (range), il valore minimo (1) e quello massimo (5).

Ma diciamoci la verità: la rappresentazione di default dei vari browser non è proprio il massimo dal punto di vista grafico! Non sarebbe bello poterla personalizzare?

Personalizziamo lo stile

Naturalmente è fattibile, bastano un paio di semplici regole CSS ed il gioco è fatto:

input[type="range"] {
    -webkit-appearance: none;
    background-color: #ddd;
    height:30px;
    width: 250px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #666;
    height: 38px;
    opacity: 0.6;
    width: 20px;
}

Nel primo blocco (righe 1-6) non facciamo altro che creare il nuovo stile del “binario” dello slider, mentre nel secondo (righe 8-14) impostiamo il nuovo stile del “puntatore” al valore corrente del campo.

Nel caso specifico di browser Firefox, è necessario aggiungere due ulteriori regole:

input[type="range"]::-moz-range-thumb {
    background-color: #666;
    border-radius: 0;
    border: none;
    height: 38px;
    opacity: 0.6;
    width: 20px;
}
input[type="range"]::-moz-range-track {
    background: #ddd;
    border: none;
}

Il primo blocco è un equivalente del blocco 1-13 precedente, ma specifico per Firefox, il secondo blocco in particolare occorre per eliminare la particolare traccia interna che Firefox applica agli input di tipo range.

Ed ecco infine come si presenta il nostro slider:

Prova a visualizzare questa pagina con diversi browser per verificare che effettivamente il risultato resta lo stesso.

Non ti resta che dare sfogo alla tua immaginazione per creare sliders sempre più accattivanti e personalizzati.