feat(range): apply range-pressed classes to host based on the knob

Author: brandyscarney

core/src/components/range/range.tsx

@@ -50,9 +50,9 @@ import type {
  * @part knob-b - The visual knob element for the second knob. Only available when `dualKnobs` is `true`.
  * @part knob-lower - The visual knob element for the lower knob. Only available when `dualKnobs` is `true`.
  * @part knob-upper - The visual knob element for the upper knob. Only available when `dualKnobs` is `true`.
- * @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
  * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
- * @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time.
+ * @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
  */
 @Component({
   tag: 'ion-range',
@@ -878,7 +878,7 @@ export class Range implements ComponentInterface {
 
         {renderKnob(rtl, {
           knob: 'A',
-          position: this.dualKnobs ? (this.ratioA <= this.ratioB ? 'lower' : 'upper') : 'lower',
+          position: getKnobPosition('A', this.ratioA, this.ratioB, this.dualKnobs),
           dualKnobs: this.dualKnobs,
           focused: focusedKnob === 'A',
           hovered: hoveredKnob === 'A',
@@ -901,7 +901,7 @@ export class Range implements ComponentInterface {
         {this.dualKnobs &&
           renderKnob(rtl, {
             knob: 'B',
-            position: this.ratioB <= this.ratioA ? 'lower' : 'upper',
+            position: getKnobPosition('B', this.ratioA, this.ratioB, this.dualKnobs),
             dualKnobs: this.dualKnobs,
             focused: focusedKnob === 'B',
             hovered: hoveredKnob === 'B',
@@ -948,6 +948,14 @@ export class Range implements ComponentInterface {
 
     const mode = getIonMode(this);
 
+    /**
+     * Determine the name and position of the pressed knob to apply
+     * Host classes for styling.
+     */
+    const pressedKnobName = dualKnobs ? pressedKnob?.toLowerCase() : undefined;
+    const pressedKnobPosition =
+      dualKnobs && pressedKnob ? getKnobPosition(pressedKnob, this.ratioA, this.ratioB, dualKnobs) : undefined;
+
     /**
      * Determine if any knob is at the min or max value to
      * apply Host classes for styling.
@@ -968,6 +976,8 @@ export class Range implements ComponentInterface {
           'range-disabled': disabled,
           'range-dual-knobs': dualKnobs,
           'range-pressed': pressedKnob !== undefined,
+          [`range-pressed-${pressedKnobName}`]: pressedKnob !== undefined && pressedKnobName !== undefined,
+          [`range-pressed-${pressedKnobPosition}`]: pressedKnob !== undefined && pressedKnobPosition !== undefined,
           'range-has-pin': pin,
           [`range-label-placement-${labelPlacement}`]: true,
           'range-item-start-adjustment': needsStartAdjustment,
@@ -1030,9 +1040,9 @@ const renderKnob = (
     min,
     max,
     disabled,
-    pressed,
     focused,
     hovered,
+    pressed,
     pin,
     handleKeyboard,
     pinFormatter,
@@ -1147,6 +1157,20 @@ const renderKnob = (
   );
 };
 
+/**
+ * Returns whether the given knob is at the lower or upper position based
+ * on current ratios for the given knob.
+ */
+const getKnobPosition = (knob: 'A' | 'B', ratioA: number, ratioB: number, dualKnobs: boolean): 'lower' | 'upper' => {
+  if (dualKnobs) {
+    if (knob === 'A') {
+      return ratioA <= ratioB ? 'lower' : 'upper';
+    }
+    return ratioB <= ratioA ? 'lower' : 'upper';
+  }
+  return 'lower';
+};
+
 const ratioToValue = (ratio: number, min: number, max: number, step: number): number => {
   let value = (max - min) * ratio;
 

core/src/components/range/test/custom/index.html

@@ -194,6 +194,20 @@
      * -----------------------------------
      */
 
+    /* Style the start slot knob value when the lower knob is pressed */
+    #lower-upper-dual-knobs-range.range-pressed-lower [slot='start'] {
+      background: var(--color-blue-light);
+      border-color: var(--color-blue-light);
+      color: #fff;
+    }
+
+    /* Style the end slot knob value when the upper knob is pressed */
+    #lower-upper-dual-knobs-range.range-pressed-upper [slot='end'] {
+      background: var(--color-blue-dark);
+      border-color: var(--color-blue-dark);
+      color: #fff;
+    }
+
     /* Knob lower */
     #lower-upper-dual-knobs-range::part(knob-lower) {
       border-radius: 50% 0 0 50%;
@@ -242,6 +256,20 @@
      * -----------------------------------
      */
 
+    /* Style the start slot knob value when the A knob is pressed */
+    #a-b-dual-knobs-range.range-pressed-a [slot='start'] {
+      background: var(--color-blue-light);
+      border-color: var(--color-blue-light);
+      color: #fff;
+    }
+
+    /* Style the end slot knob value when the B knob is pressed */
+    #a-b-dual-knobs-range.range-pressed-b [slot='end'] {
+      background: var(--color-blue-dark);
+      border-color: var(--color-blue-dark);
+      color: #fff;
+    }
+
     /* Hovered knob A */
     #a-b-dual-knobs-range::part(knob-a hover) {
       background: rgba(var(--color-blue-light-rgb), 0.5);