Updating the range pin to always be visible when enabled for the ionic theme

Author: OS-pedrolourenco

core/src/components/range/range.ionic.scss

@@ -108,19 +108,18 @@
 }
 
 .range-pin {
-  @include transform(translate3d(0, 100%, 0), scale(0.01));
-  @include padding($ion-space-200, $ion-space-200, $ion-space-200, $ion-space-200);
+  @include padding($ion-space-300, $ion-space-300, $ion-space-300, $ion-space-300);
 
   min-width: 28px;
 
-  transition: transform 120ms ease;
-
   background: transparent;
   color: $text-color;
 
   font-size: dynamic-font(12px);
 
   text-align: center;
+
+  transform: translate3d(0, calc(-100% + 11px), 0) scale(1);
 }
 
 .range-knob {
@@ -129,20 +128,6 @@
   border-color: #{ion-color(primary, base)};
 }
 
-/**
- * The -100% ensures the pin sits on top
- * of the range-knob-handle container.
- * We apply 11px so that the pin
- * text is closer to the knob inside of the container.
- * We also apply the 11px here instead of using "top"
- * otherwise the pin text will translate below the knob
- * when the text is scaled.
- */
-.range-knob-pressed .range-pin,
-.range-knob-handle.ion-focused .range-pin {
-  transform: translate3d(0, calc(-100% + 11px), 0) scale(1);
-}
-
 // Ionic Range: Disabled (based on iOS Range)
 // --------------------------------------------------
 // When the range is disabled, the entire range,

core/src/components/range/range.tsx

@@ -8,7 +8,7 @@ import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
-import type { Color, Gesture, GestureDetail } from '../../interface';
+import type {Color, Gesture, GestureDetail, Theme} from '../../interface';
 import { roundToMaxDecimalPlaces } from '../../utils/floating-point';
 
 import type {
@@ -637,6 +637,8 @@ export class Range implements ComponentInterface {
       inheritedAttributes,
     } = this;
 
+    const theme = getIonTheme(this);
+
     let barStart = `${ratioLower * 100}%`;
     let barEnd = `${100 - ratioUpper * 100}%`;
 
@@ -778,6 +780,7 @@ export class Range implements ComponentInterface {
           min,
           max,
           inheritedAttributes,
+          theme,
         })}
 
         {this.dualKnobs &&
@@ -793,6 +796,7 @@ export class Range implements ComponentInterface {
             min,
             max,
             inheritedAttributes,
+            theme,
           })}
       </div>
     );
@@ -873,11 +877,12 @@ interface RangeKnob {
   pinFormatter: PinFormatter;
   inheritedAttributes: Attributes;
   handleKeyboard: (name: KnobName, isIncrease: boolean) => void;
+  theme: Theme;
 }
 
 const renderKnob = (
   rtl: boolean,
-  { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes }: RangeKnob
+  { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, theme }: RangeKnob
 ) => {
   const start = rtl ? 'right' : 'left';
 
@@ -928,7 +933,7 @@ const renderKnob = (
     >
       {pin && (
         <div class="range-pin" role="presentation" part="pin">
-          {pinFormatter(value)}
+          {pinFormatter(value) + (theme === 'ionic' ? '%' : '')}
         </div>
       )}
       <div class="range-knob" role="presentation" part="knob" />