feat(range): add classes and expose parts for dual knobs for custom styling

core/api.txt

@@ -1475,9 +1475,25 @@ ion-range,css-prop,--pin-color,ios
 ion-range,css-prop,--pin-color,md
 ion-range,part,bar
 ion-range,part,bar-active
+ion-range,part,focused
+ion-range,part,hover
 ion-range,part,knob
+ion-range,part,knob-a
+ion-range,part,knob-b
+ion-range,part,knob-handle
+ion-range,part,knob-handle-a
+ion-range,part,knob-handle-b
+ion-range,part,knob-handle-lower
+ion-range,part,knob-handle-upper
+ion-range,part,knob-lower
+ion-range,part,knob-upper
 ion-range,part,label
 ion-range,part,pin
+ion-range,part,pin-a
+ion-range,part,pin-b
+ion-range,part,pin-lower
+ion-range,part,pin-upper
+ion-range,part,pressed
 ion-range,part,tick
 ion-range,part,tick-active
 

core/setupJest.js

@@ -8,7 +8,9 @@ expect.extend({
       throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
     }
 
-    const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`);
+    // Use attribute selector with ~= to match space-separated part values
+    // e.g., [part~="knob"] matches elements with part="knob" or part="knob knob-a"
+    const shadowPart = received.shadowRoot.querySelector(`[part~="${part}"]`);
     const pass = shadowPart !== null;
 
     const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;

core/src/components/range/range-interface.ts

@@ -1,5 +1,7 @@
 export type KnobName = 'A' | 'B' | undefined;
 
+export type KnobPosition = 'lower' | 'upper' | undefined;
+
 export type RangeValue = number | { lower: number; upper: number };
 
 export type PinFormatter = (value: number) => number | string;