Saltar al contenido

Ionic Range

Range Ionic

¿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?

Si has respondido si a cualquiera de estas preguntas, tranquilo, no eres el único ni serás el último que pasa por aquí a intentar dar respuesta a estas.

Es más, y cómo ya sabrás, hasta los más expertos necesitamos de estos artículos cuando vamos a utilizar algún componente nuevo, o alguno que llevamos mucho sin utilizar.

Por si no me conoces, mi nombre es Aitor Sánchez, soy desarrollador de apps desde el año 2014 y en el artículo de hoy te voy a enseñar cómo utilizar Ionic Range en tu aplicación y a utilizarlo de manera sencilla y cómoda.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

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.

 

Más tutoriales de Ionic

 

Y para los más ganduletes…

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

 

Bueno compañero/ra, esto es todo por hoy. Iré completando el artículo con las peticiones que me vayáis haciendo. La verdad que este componente no es largo de explicar y no me quería enrollar más de la cuenta.

Un saludo y nos vemos en el siguiente artículo 🙂