Slider range HTML: min, max, step, valore in tempo reale e ripristino

HTML input type="range" seleziona un numero all'interno di un intervallo definito usando un cursore. Imposta i suoi limiti e intervalli con min, max e step, e il suo valore iniziale con value. È adatto a regolazioni relative come volume o luminosità; usa un elemento di output separato e JavaScript per mostrare il numero corrente.

Comprendere l'intervallo e i valori predefiniti

Un input di tipo range non ha un valore vuoto. Omettere il valore non significa "non ancora selezionato" e l'attributo required non si applica. Se è importante sapere se è stata fatta una scelta esplicita in un sondaggio, considera scelte esplicite o un altro tipo di input.

I passaggi sono calcolati a partire da una base. Ad esempio, min="16" max="32" step="2" permette 16, 18, 20, fino a 32. I browser possono normalizzare un valore iniziale al di fuori dell'intervallo o del passo, quindi verifica che il valore attuale corrisponda al valore predefinito desiderato.

Esempio completo: modifica la dimensione del font in tempo reale

Salva questo codice come range.html e aprilo in un browser. Non è necessario alcun server o libreria. Il cursore cambia la dimensione del carattere di una frase di esempio da 16 a 32 px in passi di 2 px, e l'invio mostra i dati reali del modulo invece di inviarli.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Regolare la dimensione con range</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Regola la dimensione del testo</h1>
  <form id="demo">
    <label for="fontSize">Dimensione di esempio (16–32 px, passi di 2 px)</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>Dimensione attuale: <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">Mostra valori inviati</button>
      <button type="reset">Ripristina</button></p>
  </form>
  <p id="preview">Spostando il cursore cambia la dimensione di questa frase.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

1. Inizialmente la dimensione visualizzata è 20 px e l'anteprima usa quella dimensione. Invia per vedere la stringa "20" sotto il nome fontSize.
2. Muovi il cursore con un puntatore e verifica che il numero e la dimensione del carattere aggiornino insieme. Usa Tab per raggiungerlo e prova anche i tasti freccia.
3. Ad esempio, un passo della freccia destra cambia 20 in 22: la visualizzazione diventa 22 e la dimensione del carattere 22 px. L'invio ora mostra "22".
4. Reimpostare riporta il cursore, il numero e la dimensione dell'anteprima a 20. Il gestore di reimpostazione programma l'aggiornamento per il frame successivo in modo che legga il valore dopo che il reset nativo ha avuto effetto.

L’esempio usa input per aggiornare subito durante la regolazione. Per elaborare una regolazione confermata, considera change. Gli eventi differiscono per momento e scopo: scegli in base alla necessità di anteprima in tempo reale.

Distinguere valori correnti, inviati e iniziali

slider.value è il numero corrente come stringa; slider.valueAsNumber è numerico. L'attributo value in HTML è il valore iniziale: spostare il cursore non cambia anche quella stringa dell'attributo. Leggi il valore corrente dell'elemento per visualizzarlo o salvarlo.

output visualizza un risultato calcolato o selezionato; non sostituisce un campo del modulo inviato. L'esempio invia l'intervallo nominato di input. La memorizzazione reale sul server richiede una route esistente e la gestione della richiesta, nonché la convalida dell'intervallo e del passo lato server.

Scegli tra intervallo e numero e verifica la visualizzazione

Se gli utenti devono inserire una quantità, un importo o una lunghezza precisa, considera le impostazioni di intervallo e passo per l'input numerico. I cursori regolano rapidamente un livello approssimativo, ma selezionare un numero esatto può essere difficile su schermi stretti. Quando è necessaria la precisione, un input numerico sincronizzato può accompagnare il cursore.

accent-color può cambiare il colore accentato del cursore nativo. Non necessariamente colora ogni parte allo stesso modo, e l'aspetto varia a seconda del browser e del sistema operativo. Controlla la larghezza mobile, lo spazio adeguato per l'interazione, l'associazione delle etichette, il focus da tastiera e la visualizzazione numerica.

Il riferimento MDN per range descrive i valori predefiniti e gli attributi supportati.