Ionic Range komponenta

U ovom ću blog postu pokazati kako koristiti Ionic Range komponentu koja korisnicima mobilne aplikacije omogućava odabir vrijednosti pomicanjem klizača po horizontalnoj liniji.

Ionic Range komponenta

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Korištenje komponente

U ovom slučaju nisam morao instalirati nikakav Ionic Native plugin. Dovoljno mi je bilo samo vidjeti što kaže dokumentacija.

Ako u aplikaciju ubacim sljedeći kod, iz dokumentacije, on neće raditi ništa osim što će stajati na ekranu i omogućiti pomicanje klizača.

Zato svakom </ion-range> elementu dodajem funkciju (ngModelChange)="prikazVrijednosti($event)" koja će omogućiti dohvaćanje vrijednosti klizača.

Funkcionalnost se sastoji od samo jedne funkcije.

Što na kraju izgleda ovako:

Ionic Range komponenta

Osim toga, mogu se napraviti i konkretnije stvari. Npr. klizač za izračun broja mjeseci otplate kredita pri čemu je 1 mjesec minimalna vrijednost, a 120 mjeseci tj. 10 godina maksimalna vrijednost.

Funkcionalnost sada izgleda malo drugačije

Ionic Range komponenta

Zaključak

S obzirom da je ova komponenta toliko jednostavna tu se nema što posebno za zaključiti osim da je pomoću ove komponente moguće poboljšati korisničko iskustvo korištenja Ionic aplikacije.

I za kraj, package.json datoteka