I need to to display two ion-range slider on single page one with age and another with amount slider, age ion-slider should display pin value with years (ex 70 years) and amount slider should display £ symbol before amount (£2500), I tried adding the below SCSS and same reflecting for both slider I,e with £ value… wondering how to add the CSS for another slider for age (years). could you please let me know if any workaround to apply different format for part(pin)
ion-range::part(pin) {
top: -30px;
width: 50px;
height: 25px;
text-align: center;
background: #4b4b4b;
color: #fff;
font-size: 12px;
display: block;
position: absolute;
left: -10px;
transform: translate3d(0px, 0px, 0px) scale(1);
&::before {
content: '£';
}
}