Ionic 4 Range bar customize

Question

I'm using Ionic V4 with angular. I'm trying to customize the ion-range but for some reason I cannot access all objects inside the range bar. For example:

I just need to put the text "TEST" in the Pin range as you can see in the picture.

If anyone has a good idea regardless of Ionic Range I would love to hear.

score 0 · Answer 1 · answered Jan 10 '20 at 11:48

Since knob is part of ion-range's shadow DOM it is not easy to customize it.

You could do the following trick to place text "TEST" onto the knob via --knob-background property (Ionic 4):

template:

      <ion-item>
        <ion-range min="-200" max="200" color="secondary" class="rangeWithKnobText">
          <ion-label slot="start">-200</ion-label>
          <ion-label slot="end">200</ion-label>
        </ion-range>
      </ion-item>

scss:

.rangeWithKnobText {
    --knob-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 150 150' style='background-color:white'%3E%3Ctext style='font-size: 48px' fill='black' x='20' y='92'%3ETEST%3C/text%3E%3C/svg%3E") no-repeat; 
    --knob-size: 40px
}

demo:

https://stackblitz.com/edit/ionic-v4-angular-tabs-aycdyq

Basically you are leveraging css background property and inlining SVG (encoded) as background's url

Ionic 4 Range bar customize

1 Answers1