feat(range): updating the range pin to always be visible when enabled for ionic theme (#29988)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The ion-range pin is only shown we the range is being dragged for all
themes.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- This PR updates the range pin so that it is alway visible when it is
enabled for the ionic theme.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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

@@ -63,7 +63,7 @@
   * overlapping the range. The buffer is added to the
   * bottom of the range label instead of the host.
   */
-  @include padding(calc(globals.$ion-space-200 + globals.dynamic-font(12px)), null, null, null);
+  @include padding(calc(globals.$ion-space-100 + globals.$ion-scale-600), null, null, null);
 }
 
 :host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
@@ -107,12 +107,11 @@
 }
 
 .range-pin {
-  @include transform(translate3d(0, 100%, 0), scale(0.01));
-  @include padding(globals.$ion-space-200, globals.$ion-space-200, globals.$ion-space-200, globals.$ion-space-200);
+  @include padding(null, null, globals.$ion-space-100, null);
 
   min-width: globals.$ion-scale-700;
 
-  transition: transform 120ms ease;
+  transform: translate3d(0, calc(-100%), 0);
 
   background: transparent;
 
@@ -128,20 +127,6 @@
   box-sizing: border-box;
 }
 
-/**
- * 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,