Home>Guide>Come personalizzare un input range con CSS

Come personalizzare un input range con CSS


Come personalizzare un input range con CSS

Sicuramente gli input di tipo range non sono tra i più utilizzati nel markup, ma se ben utilizzati possono dare quel tocco di classe in più ad un layout, oltre a migliorare l’usabilità del tuo sito web. Ma a cosa servono e come possiamo personalizzarli? Scopriamolo insieme!

  • Leggi l'articolo, ti bastano solo 1 minuto, 11 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

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:

Come personalizzare un input range con CSS - Browser

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.




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come prelevare i prodotti nelle categorie speciali in PrestaShop

Come prelevare i prodotti nelle categorie speciali in PrestaShop


Impariamo ad utilizzare le funzioni utili per prelevare i prodotti dalle categorie speciali di PrestaShop, personalizzando al massimo il tuo e-commerce.

Come filtrare gli articoli di WordPress per tassonomia personalizzata

Come filtrare gli articoli di WordPress per tassonomia personalizzata


Aumenta l’usabilità del backend del tuo sito WordPress aggiungendo la possibilità di filtrare gli articoli (ma anche gli altri post type) attraverso una tassonomia personalizzata.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto