How do I change Ionic 4's ion-range pin font and formatting?

Question

As an example, I tried this in my global.scss file:

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

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

But this has no effect. I'm sure this has something to do with shadow root but I'm not sure what the right thing to do is here. Adding ion-range .range-pin to be more specific doesn't help either. How do I achieve this change?

Answer 1

You are correct that the ion-range pin is part of the shadow dom, therefore we must use the SCSS variables that Ionic provides to customize the pin.

Unfortunately the Ionic Documentation doesn't always list all the variables, but looking at the master source code on Github for the range component, we can get an idea of what variables are currently available.

I look at the range.md.scss file which contains the variables that are available for the range pin:

:host {
  --knob-border-radius: 50%;
  --knob-background: var(--bar-background-active);
  --knob-box-shadow: none;
  --knob-size: 18px;
  --bar-height: #{$range-md-bar-height};
  --bar-background: #{ion-color(primary, base, 0.26)};
  --bar-background-active: #{ion-color(primary, base)};
  --bar-border-radius: 0;
  --height: #{$range-md-slider-height};
  --pin-background: #{ion-color(primary, base)};
  --pin-color: #{ion-color(primary, contrast)};

  @include padding($range-md-padding-vertical, $range-md-padding-horizontal);

  font-size: $range-md-pin-font-size;
}

:host means the host component, which is ion-range. There are two variables for background & color that we can use like this in our home.page.scss file:

ion-range {
    --pin-background: black;
    --pin-color: red;
}

Since font-family is not available as a variable, we should be able to use it directly like this:

ion-range {
    --pin-background: black;
    --pin-color: red;
    font-family: sans-serif;
}

Targeting the :after portion of .range-pin is not going to work, unfortunately because it is part of the shadow dom. You may have to figure out some other black magic to get what you want, or maybe suggest to the Ionic Team that they add the variable in a future release :-)

Answer 2

though my answer is not specific to your question but it may help someone as I was also stuck in this issue, I was unable to change the background color of pin and knob of ion-range because in template file, I had set color of ion-range like this

<ion-range color="light" class="range" pin="true" min="18" max="32" step="1" debounce="1000</ion-range>

so css custom properties were not working in scss

.range {
            --knob-size: 40px;
            --knob-background: green !important;
            --bar-background: white;
            --bar-background-active: white;
            display: block;
            height: 40px;
            padding: 0 15px;
        }

so don't set the color property in template file