La fascia di prezzo

Slider, Fisica, TransizioniGSAPMediaPeso compresso: Demo 6,5 KBGSAP 28 KBGratisScarica lo zip

Un filtro per il prezzo di una notte sopra l’istogramma degli alloggi: le due maniglie seguono la mano su molle allungandosi un poco, le barre cambiano colore con un saltello quando una maniglia ci passa sopra, i due prezzi si uniscono quando si incontrano e il numero degli alloggi conta su e giù.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The price range</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sofia-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the price range: two handles on springs over a histogram of prices; the bars light up with a little jump as a
         handle goes over them, the two prices join when they meet, and the number of stays counts up and down -->
    <section class="price" aria-labelledby="price-title" data-price data-autoclic>
      <header class="price__head">
        <div>
          <h2 class="price__title" id="price-title">Price per night</h2>
          <p class="price__note">Before taxes and fees</p>
        </div>
        <p class="price__count"><span data-count>0</span> stays</p>
      </header>
      <div class="price__chart" data-chart>
        <div class="price__bars" aria-hidden="true" data-bars></div>
        <div class="price__track" aria-hidden="true"><span class="price__fill" data-fill></span></div>
        <span class="price__thumb" aria-hidden="true" data-thumb></span>
        <span class="price__thumb" aria-hidden="true" data-thumb></span>
        <span class="price__tag" aria-hidden="true" data-tag></span>
        <span class="price__tag" aria-hidden="true" data-tag></span>
        <span class="price__tag price__tag--both" aria-hidden="true" data-both></span>
        <input class="price__range" type="range" aria-label="Minimum price" data-range>
        <input class="price__range" type="range" aria-label="Maximum price" data-range>
      </div>
      <div class="price__fields">
        <label class="field">
          <span class="field__label">Minimum</span>
          <span class="field__box"><span aria-hidden="true">€</span><input class="field__input" type="text" inputmode="numeric" autocomplete="off" data-field></span>
        </label>
        <label class="field">
          <span class="field__label">Maximum</span>
          <span class="field__box"><span aria-hidden="true">€</span><input class="field__input" type="text" inputmode="numeric" autocomplete="off" data-field></span>
        </label>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

24 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «La fascia di prezzo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una scheda con Price per night, Before taxes and fees e, in un’etichetta verde acqua, 301 stays; sotto, un istogramma di 36 barre (quanti alloggi costano quanto, da 20 a 380 euro), una linea con due maniglie tonde e la parte fra loro colorata, i prezzi scelti in due etichette scure (€80 e €220) e due caselle, Minimum e Maximum. All’apertura le barre crescono dal basso una dopo l’altra e le maniglie si aprono dal centro, accendendo le barre su cui passano. Trascinando una maniglia (o premendo sul grafico, che prende la più vicina) la maniglia segue la mano su una molla, allungandosi un poco mentre corre; le barre su cui passa cambiano colore con un saltello, in su quelle che entrano e in giù quelle che escono, il numero degli alloggi sale o scende e le etichette dei prezzi la seguono; quando si toccano diventano una sola, come €180 – €220. Le maniglie non si scavalcano. Un prezzo scritto in una casella sposta la sua maniglia; qualcosa che non è un prezzo fa tremare la casella, che torna com’era.

Come funziona

Le maniglie sulle molle

Ogni maniglia va verso il prezzo scelto (arrotondato a STEP) su una molla (SPRING), calcolata sul ticker di GSAP a passi di 4 millisecondi; la velocità della molla la allunga (scaleX fino a 1,28, e un poco più sottile). Le maniglie si fermano un passo prima l’una dell’altra, così non si scavalcano.

Le barre che saltano

Ogni barra ha una sua molla (POP) fra 0 (fuori) e 1 (dentro): è dentro quando il suo centro sta fra le due maniglie dove sono adesso, così cambia proprio quando una maniglia ci passa sopra. Il colore va dal grigio al verde acqua con la molla; quando la molla va oltre (poco frenata, salta) la barra si allunga entrando e si accorcia uscendo.

I prezzi che si uniscono

Le etichette stanno sotto le maniglie, tenute dentro il grafico; quando fra le due restano meno di 8 pixel lasciano il posto, in dissolvenza, a un’etichetta sola col prezzo minimo e massimo, al centro fra le maniglie.

Il numero degli alloggi

I prezzi degli alloggi sono una serie fissa (gli stessi ogni volta, da un generatore con un seme): l’istogramma li conta in BARS gruppi, e il numero in alto è quanti stanno fra i due prezzi scelti, portato al valore nuovo in 0,5 secondi.

Tasti e anteprima

Sotto le maniglie disegnate ci sono due slider veri (input range) con aria-valuetext in euro: col Tab si raggiungono, le frecce muovono di STEP, Pagina su e giù di più, Inizio e Fine agli estremi, e la maniglia disegnata mostra la focalizzazione. Le caselle prendono un prezzo e lo confermano con Invio; una regione aria-live dice quanti alloggi ci sono fra i due prezzi. Un clic da script (l’anteprima della libreria) è una mano finta che porta le maniglie a un intervallo nuovo, una dopo l’altra.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`RANGE`	script.js	`[20, 380]`	Il prezzo più basso e quello più alto della scala, in euro.
`STEP`	script.js	`5`	Di quanti euro si sposta una maniglia.
`SPRING`	script.js	`[520, 0.72]`	La molla delle maniglie: quanto è rigida e quanto è frenata.
`POP`	script.js	`[420, 0.4]`	La molla delle barre quando ci passa sopra una maniglia: rigida e poco frenata, così salta.
`BARS`	script.js	`36`	Quante barre ha l’istogramma.
`START`	script.js	`[80, 220]`	I prezzi scelti all’apertura della pagina.

Provali nel Playground

Quando usarla

Per i filtri di un sito di prenotazioni, di un negozio, di un’agenzia immobiliare o di un sito di annunci: ovunque si sceglie un intervallo, di prezzo, di superficie, di anni.

Sul telefono

Il grafico si trascina col dito senza far scorrere la pagina (touch-action none) e una pressione in un punto qualsiasi prende la maniglia più vicina; le caselle sono a 16 pixel, così Safari su iPhone non ingrandisce la pagina, e aprono la tastiera dei numeri (inputmode numeric).

Con il movimento ridotto

Le maniglie vanno subito al prezzo scelto, senza molla né allungamento, le barre cambiano colore senza saltare, il numero cambia di colpo, le etichette si uniscono senza dissolvenza e all’apertura niente cresce.

Trappole

Due input range uno sopra l’altro si rubano il puntatore: qui stanno sotto, nascosti, solo per i tasti e i lettori di schermo, e il trascinamento lo fa il grafico disegnato.
In una griglia a due colonne 1fr una casella di testo non si stringe sotto la sua larghezza naturale ed esce dalla scheda: minmax(0, 1fr) per le colonne e width 100% sull’input.
Number di una stringa vuota fa 0, non NaN: un testo senza cifre va controllato prima, o diventerebbe il prezzo più basso.
Le barre cambiano secondo dove sono le maniglie in quel momento, non secondo i prezzi scelti: così l’onda segue la maniglia invece di arrivare tutta insieme.

Librerie

GSAP 3.15.0, Sofia Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,5 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 3 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.