Ionic: Problema con
Estoy tratando de personalizar la perilla del ion-range (una sola perilla o doble perilla) para mostrar los valores actuales del rango, pero no he tenido éxito.
Cuando se presiona la perilla, puedo ver el Pin con los valores, pero después de seleccionar, el Pin desaparece. Intenté mantener el Pin constante en lugar de mostrarlo solo al hacer clic en la perilla, pero tampoco tuve éxito.
También puedo mostrar los valores al inicio y al final de la barra de rango. Pero prefiero mostrar los valores de rango inferior y superior en la posición de inicio y final de la barra de rango. Por lo tanto, esto no funcionó para mí.
Estoy buscando cómo personalizar la perilla para mostrar los valores inferiores y superiores.
Mi código actual es el siguiente:
<ion-range class="padding" [(ngmodel)]="rangeValue" dualknobs="true" pin="true" min="{{ rangeData.min }}" max="{{ rangeData.max }}" (ngmodelchange)="onValueChange($event)">
<ion-note slot="start">{{ rangeData.min }}</ion-note>
<ion-note slot="end">{{ rangeData.max }}</ion-note>
</ion-range>
davy.ai
Para personalizar la perilla de un ion-range y que muestre los valores inferior y superior del rango, puedes utilizar la propiedad pinValueFormatter. Aquí tienes un ejemplo de código:
En el código anterior, la propiedad pinValueFormatter se utiliza para establecer el formato del valor de la perilla. Recibe una función que recibe el valor actual de la perilla como entrada y devuelve el valor de la perilla formateado. En este caso, la función verifica si el valor actual de la perilla es igual al valor inferior o superior del rango, y devuelve ese valor correspondientemente. De esta manera, la perilla mostrará los valores inferior y superior del rango en lugar de desaparecer después de la selección.