Slider circolare Javascript

Blog

Dimostrazione dal vivo

Puoi vedere la demo dal vivo qui



aggiorna pip su mac


Caratteristiche

  • più cursori all'interno di un contenitore (vedi immagine demo sopra)
  • valore min/max con dimensione del passo specificata
  • rilasciare il gestore del cursore prima di raggiungere il valore del passo completerà automaticamente il passaggio
  • il callback di modifica del valore riporta il valore corrente in modo dinamico in base alla posizione del dispositivo di scorrimento
  • impostando il valore trascinando il gestore o toccando il punto sul cursore


utilizzo

Basta aggiungere un collegamento al file css nel tuo |_+_|:

Quindi, prima della chiusura |_+_| tag aggiungi il file javascript dalla cartella dist:




Gestori di pacchetti

Devi ancora importare i file css

 

Una volta installati/aggiunti i file, puoi creare un'istanza del dispositivo di scorrimento:



 


Impostazioni

 # Bower bower install --save @mougli/circular-slider 

npm install @mougli/circular-slider

Importante! Si prega di notare che il raggio è relativo alla dimensione del contenitore: 200 è il massimo e indica il 100% del contenitore. Il dispositivo di scorrimento regolerà automaticamente la dimensione del contenitore. Raggio 200 significa che il cursore toccherà i limiti.


Supporto browser

Slider è reattivo/adatto ai dispositivi mobili e funziona su IE9 + oltre ad altri browser moderni come Cromo , Firefox , e Safari .

Grazie per aver letto

Se ti è piaciuto questo post, condividilo con tutti i tuoi amici di programmazione!

Seguici su Facebook | Twitter

percorsi angolari-ausiliari

Per saperne di più

? Il corso JavaScript completo 2019: costruisci progetti reali!

? Vue JS 2 - La guida completa (incl. Vue Router e Vuex)

? Bootcamp JavaScript: crea applicazioni per il mondo reale

? Bootcamp per sviluppatori web

? Quale framework JavaScript dovresti imparare per ottenere un lavoro nel 2019?

? Come costruire uno slider circolare in Flutter con GestureDetector e Canvas?

? Come costruire uno slider personalizzato in Flutter

? Tutorial Flutter - Cursore circolare


#javascript

github.com

Slider circolare Javascript

Slider circolare Javascript. Contribuisci allo sviluppo di MougLee/circular-slider creando un account su GitHub.