Ionic-framework: feat: Ability to modify ion-range pin css

[CitizenBeta]

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

[cmer4]

I have similar use case - styled color fill ranges with relevant letters - HSL etc. Now had to pivot and use letters as items in slots to a side of range.

Would upvote this feature as especially on mobile devices where "space" of UI is scarce such customization was very helpful.

[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.

[elvisgraho]

Same issue.

.range-knob {
  margin-left: 10px;
}

[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

[elvisgraho]

@webcat12345 Thank you.