Slider
importanza: 5
Create uno cursore a scorrimento:
Trascinare il cursore blu con il mouse e spostarlo.
Dettagli importanti:
- Quando si preme il pulsante del mouse, durante il trascinamento il mouse dovrebbe poter andare sotto o sopra il cursore, senza interromperlo (comodo per l’utente).
- Se il mouse si muove molto velocemente da sinistra a destra, il cursore si dovrebbe fermare esattamente sul bordo.
Come possiamo notare dall’HTML/CSS, lo slider è un <div> con sfondo colorato, che contiene un altro <div> con position:relative.
Per posizionare il cursore useremo position:relative, per fornire le coordinate relative al genitore, ed in questo caso è meglio usarlo al posto di position:absolute.
Quindi andremo a implementare il Drag’n’Drop esclusivamente orizzontale con il vincolo sulla larghezza.