feat: Ability to modify ion-range pin css

Feature Request

Ionic version: [x] 4.x

Describe the Feature Request In Ionic3 we were able to modify the pin to append text (like money or a percent) like this:

.range-pin {
  color: white;
  font-family: sans-serif;

  &after:{
    content: " %";
  }
}

And in Ionic4 it seems from everything I can read that this simply isn’t possible, which feels like I’m taking crazy pills. Something this simple shouldn’t be so hard.

Describe Preferred Solution Either make <ion-range-pin> it’s own component so that we can edit its’ css directly like we can <ion-input>.

Describe Alternatives Make every possible css property a css custom variable? It feels bonkers that I can’t simply modify the .range-pin class. It’s 2019 and I can’t do things I could 20 years ago.

Related Code .range-pin {} isn’t modifyable

Additional Context https://stackoverflow.com/questions/56995766/how-do-i-change-ionic-4s-ion-range-pin-font-and-formatting

[webcat12345]

If you’re using an Ionic version and already uses CSS Shadow Parts 3 then you can achieve this by using:

ion-range::part(pin) {
  transform: translate3d(0px, -24px, 0px) scale(1);
}

There you can use knob and others from here

[meghajayakumar]

Any update on this feature request? I am having a similar use case where I have to include custom text and styles to range-knob and range-pin.