Ionic: ion-range

Ion-range sirve para crear sliders con uno o doble marcador para elegir un valor dentro de un rango.

Puedes agregar una etiqueta inicial y final a izquierda y derecha del slider.

Os pongo aquí un ejemplo visual de sliders:

Aquí os pongo el código fuente de este ejemplo:

See the Pen Ion-range by Gabriel Cuesta Arza (@gabicuesta) on CodePen.

Ion-slider dispone de las siguientes propiedades:

• color: Para cambiar el color, puede ser primary, secondary, tertiary, success, warning, danger, light, medium, dark.
• debounce: tiempo en milisegundos antes de lanzar el evento ionChange.
• disable: Si está a true desactiva el slider.
• dualKnobs: Muestra dos selectores de rango en vez de uno si está en true.
• max: Valor máximo del selector.
• min: Valor mínimo del rango.
• mode: Modo ios o por defecto.
• name: Nombre del control para obtener su valor.
• pin: Si está true muestra el valor del pin al ser seleccionado.
• snaps: Si está true se muestran marcas para mover el slider de manera escalonada según los steps.
• steps: Establece los saltos dentro de los valores del rango.
• ticks: Si está a true muestra el valor de cada tick cuando se pasa por encima.
• value: Valor del rango.

En cuanto a los eventos tiene los siguientes:

• ionBlur: Se lanza cuando se quita el foco del selector.
• ionChange: Cuando se cambia el valor del selector.
• ionFocus: Cuando se tiene el foco en el selector.

Como veis es un control muy configurable y muy útil.