Ionic Range | Aprende aquí a utilizar este componente

¿Quieres mostrar a tu usuario un selector de rango de, por ejemplo, grados o metros mediante el componente Ionic Range? O, quizás, ya sabes cómo se hace, pero te falta algún detalle para dejarlo cómo tu quieres ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en el artículo de hoy vas a aprender a utilizar Ionic Range en tu aplicación y a utilizarlo de manera sencilla y cómoda.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Instalación y configuración de Ion Range

Al ser un componente que pertenece al sistema no es necesario instarlo ni configurarlo para que funcione correctamente.

Como se usa Range en Ionic

En primer lugar, vamos a ver el código HTML necesario para poder utilizarlo.

<ion-list>
  <ion-item>
    <ion-range [(ngModel)]="valorSimple" color="danger" pin="true"></ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="-200" max="200" [(ngModel)]="saturacion" color="secondary">
      <ion-label range-left>-200</ion-label>
      <ion-label range-right>200</ion-label>
    </ion-range>
  </ion-item>

 <ion-item>
   <ion-range min="20" max="80" step="2" [(ngModel)]="brillo">
     <ion-icon small range-left name="sunny"></ion-icon>
     <ion-icon range-right name="sunny"></ion-icon>
   </ion-range>
 </ion-item>

  <ion-item>
    <ion-label>step=100, snaps, </ion-label>
    <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary" [(ngModel)]="valorSimple4"></ion-range>
  </ion-item>

  <ion-item>
    <ion-label>dual, step=3, snaps, </ion-label>
    <ion-range dualKnobs="true" [(ngModel)]="valorDual2" min="21" max="72" step="3" snaps="true"></ion-range>
  </ion-item>
</ion-list>

Como has podido comprobar, es muy sencillo y tenemos varias maneras de añadirlo. Configurar el máximo y el mínimo, el tamaño, los labels de los extremos y muchas otras cositas que explicaremos más abajo.

Propiedades de Ionic Range

• color -> string -> Será la paleta de colores que vamos a usar para desplegar el range. De manera predeterminada tenemos:
  • primary
  • secondary
  • tertiary
  • success
  • warning
  • dange
  • light
  • médium
  • dark
• debounce -> number -> Será el tiempo, en milisegundos, desde que se suelta uno de los extremos del range hasta que el evento “ionChange” hace efecto.
• disabled -> boolean -> Si es verdadero no permitirá la alteración del range.
• dualKnobs -> boolean -> Si es verdadero permite que ambos lados del range puedan usarse.
• max -> number -> Es el rango máximo al que puede optar un usuario dentro de un range.
• min -> number -> Similar al anterior, pero con el mínimo.
• mode -> string -> Nos permite modificar el aspecto del range. Los parámetros posibles son:
  • ios
  • md
• name -> string -> El nombre (name) del componente en caso de que queramos controlarlo desde el control de formularios de Ionic o enviarlo a través de un formulario web.
• pin -> boolean -> En caso de que sea verdadero pedirá el pin cuando intentemos interactuar con uno de los knobs del range.
• snaps -> Si es verdadero, al soltar el knob se posicionará directamente en el múltiplo del step más cercano ya sea mayor o menor.
• step -> number -> Especifica el valor granular que sumará, o restará, cada uno de los avances, o retrocesos, de un knob dentro del range.
• value -> number | {lower: number, upper: number} -> Es el valor que contiene en ese instante el range.
• events -> Son los eventos que contiene el range para que los podamos controlar y trabajar con ellos.
  • ionBlur -> Se emite cuando ha perdido el focus.
  • ionChange -> Se emite cuando ha cambiado de valor.
  • ionFocus -> Se emite cuando ha cogido el focus.

Tutorial en video por si no te guta leer

Aquí tienes un vídeo explicativo donde aprenderás de una manera fácil y sencilla como usar el compoente :)

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Geniete, espero haberte ayudado a programar ese selector que se nos escapaba. Nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!