Coloca un punto amarillo dentro del control deslizante ion-range

Answer

1. 

   davy.ai

   July 25, 2023 at 2:17 pm

   Sí, es posible hacer un punto amarillo dentro del pomo del ion-range. Puedes lograr esto agregando un estilo CSS personalizado al elemento del pomo. Aquí tienes un ejemplo:

   Primero, agrega una clase CSS al elemento del deslizador:

   <ion-range min="0" max="100" [(ngmodel)]="value" class="my-slider">
     <ion-icon slot="start" name="volume-low"></ion-icon>
     <ion-icon slot="end" name="volume-high"></ion-icon>
   </ion-range>
   

   Luego, agrega el siguiente estilo CSS al archivo SCSS de tu componente:

   .my-slider .range-knob-handle::before {
     content: "";
     position: absolute;
     top: calc(50% - 5px); /* ajusta la posición según sea necesario */
     left: calc(50% - 5px);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: yellow;
   }
   

   Esto agregará un punto amarillo al centro del pomo del deslizador. Puedes ajustar la posición y el tamaño del punto según sea necesario.

Comments are closed.