@ionic/core 8.7.17-dev.11770405784.157a3c10 → 8.7.17-dev.11771865171.14f4c2cf

package/dist/collection/components/segment-view/segment-view.js

@@ -11,10 +11,6 @@ export class SegmentView {
          * If `true`, the segment view cannot be interacted with.
          */
         this.disabled = false;
-        /**
-         * If `true`, users will be able to swipe the segment view to navigate between segment contents.
-         */
-        this.swipeGesture = true;
     }
     handleScroll(ev) {
         var _a;
@@ -102,12 +98,11 @@ export class SegmentView {
         return Array.from(this.el.querySelectorAll('ion-segment-content'));
     }
     render() {
-        const { disabled, isManualScroll, swipeGesture } = this;
-        return (h(Host, { key: '565cccce7f0cfc4c71508777cc60292d6f24334f', class: {
+        const { disabled, isManualScroll } = this;
+        return (h(Host, { key: 'e180b67bb3143a5f4611fb358c037be6fc782a8f', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-                'segment-view-swipe-disabled': swipeGesture === false,
-            } }, h("slot", { key: '4118c240364467302b8f593e33c37837ea5d06f0' })));
+            } }, h("slot", { key: '41c11d6a7406a10f5c64a2e73abfc072afd8fc73' })));
     }
     static get is() { return "ion-segment-view"; }
     static get encapsulation() { return "shadow"; }
@@ -144,26 +139,6 @@ export class SegmentView {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
-            },
-            "swipeGesture": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, users will be able to swipe the segment view to navigate between segment contents."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "swipe-gesture",
-                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/segment-view/segment-view.md.css

@@ -14,8 +14,7 @@
   display: none;
 }
 
-:host(.segment-view-disabled),
-:host(.segment-view-swipe-disabled) {
+:host(.segment-view-disabled) {
   touch-action: none;
   overflow-x: hidden;
 }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-06T19:24:47",
+  "timestamp": "2026-02-23T16:48:01",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",
@@ -25548,6 +25548,10 @@
           "name": "slot",
           "text": "end - Content is placed to the right of the range slider in LTR, and to the left in RTL."
         },
+        {
+          "name": "part",
+          "text": "label - The label text describing the range."
+        },
         {
           "name": "part",
           "text": "tick - An inactive tick mark."
@@ -25556,25 +25560,89 @@
           "name": "part",
           "text": "tick-active - An active tick mark."
         },
+        {
+          "name": "part",
+          "text": "bar - The inactive part of the bar."
+        },
+        {
+          "name": "part",
+          "text": "bar-active - The active part of the bar."
+        },
+        {
+          "name": "part",
+          "text": "knob-handle - The container element that wraps the knob and handles drag interactions."
+        },
+        {
+          "name": "part",
+          "text": "knob-handle-a - The container element for the first knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "knob-handle-b - The container element for the second knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "knob-handle-lower - The container element for the lower knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "knob-handle-upper - The container element for the upper knob. Only available when `dualKnobs` is `true`."
+        },
         {
           "name": "part",
           "text": "pin - The counter that appears above a knob."
         },
         {
           "name": "part",
-          "text": "knob - The handle that is used to drag the range."
+          "text": "pin-a - The counter that appears above the first knob. Only available when `dualKnobs` is `true`."
         },
         {
           "name": "part",
-          "text": "bar - The inactive part of the bar."
+          "text": "pin-b - The counter that appears above the second knob. Only available when `dualKnobs` is `true`."
         },
         {
           "name": "part",
-          "text": "bar-active - The active part of the bar."
+          "text": "pin-lower - The counter that appears above the lower knob. Only available when `dualKnobs` is `true`."
         },
         {
           "name": "part",
-          "text": "label - The label text describing the range."
+          "text": "pin-upper - The counter that appears above the upper knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "knob - The visual knob element that appears on the range track."
+        },
+        {
+          "name": "part",
+          "text": "knob-a - The visual knob element for the first knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "knob-b - The visual knob element for the second knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "knob-lower - The visual knob element for the lower knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "knob-upper - The visual knob element for the upper knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "activated - Added to the knob-handle, knob, and pin when the knob is activated (has the `ion-activated` class). Only one set has this part at a time when `dualKnobs` is `true`."
+        },
+        {
+          "name": "part",
+          "text": "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`."
+        },
+        {
+          "name": "part",
+          "text": "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`."
+        },
+        {
+          "name": "part",
+          "text": "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`."
         }
       ],
       "usage": {},
@@ -26386,6 +26454,10 @@
         }
       ],
       "parts": [
+        {
+          "name": "activated",
+          "docs": "Added to the knob-handle, knob, and pin when the knob is activated (has the `ion-activated` class). Only one set has this part at a time when `dualKnobs` is `true`."
+        },
         {
           "name": "bar",
           "docs": "The inactive part of the bar."
@@ -26394,9 +26466,53 @@
           "name": "bar-active",
           "docs": "The active part of the bar."
         },
+        {
+          "name": "focused",
+          "docs": "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`."
+        },
+        {
+          "name": "hover",
+          "docs": "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`."
+        },
         {
           "name": "knob",
-          "docs": "The handle that is used to drag the range."
+          "docs": "The visual knob element that appears on the range track."
+        },
+        {
+          "name": "knob-a",
+          "docs": "The visual knob element for the first knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "knob-b",
+          "docs": "The visual knob element for the second knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "knob-handle",
+          "docs": "The container element that wraps the knob and handles drag interactions."
+        },
+        {
+          "name": "knob-handle-a",
+          "docs": "The container element for the first knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "knob-handle-b",
+          "docs": "The container element for the second knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "knob-handle-lower",
+          "docs": "The container element for the lower knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "knob-handle-upper",
+          "docs": "The container element for the upper knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "knob-lower",
+          "docs": "The visual knob element for the lower knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "knob-upper",
+          "docs": "The visual knob element for the upper knob. Only available when `dualKnobs` is `true`."
         },
         {
           "name": "label",
@@ -26406,6 +26522,26 @@
           "name": "pin",
           "docs": "The counter that appears above a knob."
         },
+        {
+          "name": "pin-a",
+          "docs": "The counter that appears above the first knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "pin-b",
+          "docs": "The counter that appears above the second knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "pin-lower",
+          "docs": "The counter that appears above the lower knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "pin-upper",
+          "docs": "The counter that appears above the upper knob. Only available when `dualKnobs` is `true`."
+        },
+        {
+          "name": "pressed",
+          "docs": "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`."
+        },
         {
           "name": "tick",
           "docs": "An inactive tick mark."
@@ -30495,35 +30631,6 @@
           "required": false,
           "getter": false,
           "setter": false
-        },
-        {
-          "name": "swipeGesture",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "swipe-gesture",
-          "reflectToAttr": false,
-          "docs": "If `true`, users will be able to swipe the segment view to navigate between segment contents.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "true"
-            }
-          ],
-          "default": "true",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
         }
       ],
       "methods": [],

package/dist/esm/ion-range.entry.js

@@ -74,6 +74,7 @@ const Range = class {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
+        this.focusFromPointer = false;
         this.ratioA = 0;
         this.ratioB = 0;
         /**
@@ -183,6 +184,29 @@ const Range = class {
                 this.gesture.enable(!this.disabled);
             }
         };
+        /**
+         * Observes the knob handles for the ion-activated class and syncs
+         * activatedKnob so the activated part is correctly set on the handle,
+         * knob, and pin.
+         */
+        this.setupActivatedObserver = () => {
+            const knobHandleA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
+            const knobHandleB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
+            const syncActivated = () => {
+                this.activatedKnob = (knobHandleA === null || knobHandleA === void 0 ? void 0 : knobHandleA.classList.contains('ion-activated'))
+                    ? 'A'
+                    : (knobHandleB === null || knobHandleB === void 0 ? void 0 : knobHandleB.classList.contains('ion-activated'))
+                        ? 'B'
+                        : undefined;
+            };
+            this.activatedObserver = new MutationObserver(syncActivated);
+            this.activatedObserver.observe(this.el.shadowRoot, {
+                attributes: true,
+                attributeFilter: ['class'],
+                subtree: true,
+            });
+            syncActivated();
+        };
         this.handleKeyboard = (knob, isIncrease) => {
             const { ensureValueInBounds } = this;
             let step = this.step;
@@ -205,6 +229,7 @@ const Range = class {
         this.onBlur = () => {
             if (this.hasFocus) {
                 this.hasFocus = false;
+                this.focusedKnob = undefined;
                 this.ionBlur.emit();
             }
         };
@@ -215,21 +240,20 @@ const Range = class {
             }
         };
         this.onKnobFocus = (knob) => {
+            // Clicking focuses the range which is needed for the keyboard,
+            // but we only want to add the ion-focused class when focused via Tab.
+            if (!this.focusFromPointer) {
+                this.focusedKnob = knob;
+            }
+            else {
+                this.focusFromPointer = false;
+                this.focusedKnob = undefined;
+            }
+            // If the knob was not already focused, emit the focus event
             if (!this.hasFocus) {
                 this.hasFocus = true;
                 this.ionFocus.emit();
             }
-            // Manually manage ion-focused class for dual knobs
-            if (this.dualKnobs && this.el.shadowRoot) {
-                const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
-                const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
-                // Remove ion-focused from both knobs first
-                knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
-                knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
-                // Add ion-focused only to the focused knob
-                const focusedKnobEl = knob === 'A' ? knobA : knobB;
-                focusedKnobEl === null || focusedKnobEl === void 0 ? void 0 : focusedKnobEl.classList.add('ion-focused');
-            }
         };
         this.onKnobBlur = () => {
             // Check if focus is moving to another knob within the same range
@@ -241,18 +265,18 @@ const Range = class {
                 if (!isStillFocusedOnKnob) {
                     if (this.hasFocus) {
                         this.hasFocus = false;
+                        this.focusedKnob = undefined;
                         this.ionBlur.emit();
                     }
-                    // Remove ion-focused from both knobs when focus leaves the range
-                    if (this.dualKnobs && this.el.shadowRoot) {
-                        const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
-                        const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
-                        knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
-                        knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
-                    }
                 }
             }, 0);
         };
+        this.onKnobMouseEnter = (knob) => {
+            this.hoveredKnob = knob;
+        };
+        this.onKnobMouseLeave = () => {
+            this.hoveredKnob = undefined;
+        };
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
@@ -329,6 +353,7 @@ const Range = class {
         this.originalIonInput = this.ionInput;
         this.setupGesture();
         this.updateRatio();
+        this.setupActivatedObserver();
         this.didLoad = true;
     }
     connectedCallback() {
@@ -354,6 +379,10 @@ const Range = class {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        if (this.activatedObserver) {
+            this.activatedObserver.disconnect();
+            this.activatedObserver = undefined;
+        }
     }
     getValue() {
         var _a;
@@ -506,7 +535,6 @@ const Range = class {
             ratio = 1 - ratio;
         }
         this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
-        this.setFocus(this.pressedKnob);
     }
     get valA() {
         return ratioToValue(this.ratioA, this.min, this.max, this.step);
@@ -533,9 +561,23 @@ const Range = class {
     updateRatio() {
         const value = this.getValue();
         const { min, max } = this;
+        /**
+         * For dual knobs, value gives lower/upper but not which is A vs B.
+         * Assign (lowerRatio, upperRatio) to (ratioA, ratioB) in the way that
+         * minimizes change from the current ratios so the knobs don't swap.
+         */
         if (this.dualKnobs) {
-            this.ratioA = valueToRatio(value.lower, min, max);
-            this.ratioB = valueToRatio(value.upper, min, max);
+            const lowerRatio = valueToRatio(value.lower, min, max);
+            const upperRatio = valueToRatio(value.upper, min, max);
+            if (Math.abs(this.ratioA - lowerRatio) + Math.abs(this.ratioB - upperRatio) <=
+                Math.abs(this.ratioA - upperRatio) + Math.abs(this.ratioB - lowerRatio)) {
+                this.ratioA = lowerRatio;
+                this.ratioB = upperRatio;
+            }
+            else {
+                this.ratioA = upperRatio;
+                this.ratioB = lowerRatio;
+            }
         }
         else {
             this.ratioA = valueToRatio(value, min, max);
@@ -552,14 +594,6 @@ const Range = class {
             };
         this.noUpdate = false;
     }
-    setFocus(knob) {
-        if (this.el.shadowRoot) {
-            const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b');
-            if (knobEl) {
-                knobEl.focus();
-            }
-        }
-    }
     /**
      * Returns true if content was passed to the "start" slot
      */
@@ -577,7 +611,7 @@ const Range = class {
     }
     renderRangeSlider() {
         var _a;
-        const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
+        const { min, max, step, handleKeyboard, activatedKnob, focusedKnob, hoveredKnob, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
         let barStart = `${ratioLower * 100}%`;
         let barEnd = `${100 - ratioUpper * 100}%`;
         const rtl = isRTL(this.el);
@@ -637,7 +671,9 @@ const Range = class {
                 ticks.push(tick);
             }
         }
-        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
+        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl), onPointerDown: () => {
+                this.focusFromPointer = true;
+            },
             /**
              * Since the gesture has a threshold, the value
              * won't change until the user has dragged past
@@ -650,6 +686,7 @@ const Range = class {
              * we need to listen for the "pointerUp" event.
              */
             onPointerUp: (ev) => {
+                this.focusFromPointer = false;
                 /**
                  * If the user drags the knob on the web
                  * version (does not occur on mobile),
@@ -675,6 +712,11 @@ const Range = class {
                 'has-ticks': ticks.length > 0,
             }, role: "presentation", style: barStyle, part: "bar-active" })), renderKnob(rtl, {
             knob: 'A',
+            position: getKnobPosition('A', this.ratioA, this.ratioB, this.dualKnobs),
+            dualKnobs: this.dualKnobs,
+            activated: activatedKnob === 'A',
+            focused: focusedKnob === 'A',
+            hovered: hoveredKnob === 'A',
             pressed: pressedKnob === 'A',
             value: this.valA,
             ratio: this.ratioA,
@@ -687,9 +729,16 @@ const Range = class {
             inheritedAttributes,
             onKnobFocus: this.onKnobFocus,
             onKnobBlur: this.onKnobBlur,
+            onKnobMouseEnter: this.onKnobMouseEnter,
+            onKnobMouseLeave: this.onKnobMouseLeave,
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
+                position: getKnobPosition('B', this.ratioA, this.ratioB, this.dualKnobs),
+                dualKnobs: this.dualKnobs,
+                activated: activatedKnob === 'B',
+                focused: focusedKnob === 'B',
+                hovered: hoveredKnob === 'B',
                 pressed: pressedKnob === 'B',
                 value: this.valB,
                 ratio: this.ratioB,
@@ -702,6 +751,8 @@ const Range = class {
                 inheritedAttributes,
                 onKnobFocus: this.onKnobFocus,
                 onKnobBlur: this.onKnobBlur,
+                onKnobMouseEnter: this.onKnobMouseEnter,
+                onKnobMouseLeave: this.onKnobMouseLeave,
             })));
     }
     render() {
@@ -720,6 +771,12 @@ const Range = class {
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
+        /**
+         * Determine the name and position of the pressed knob to apply
+         * Host classes for styling.
+         */
+        const pressedKnobName = dualKnobs ? pressedKnob === null || pressedKnob === void 0 ? void 0 : 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.
@@ -727,21 +784,24 @@ const Range = class {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'ed646a42d51b8fe22012198c354cbcf5a389c108', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8e439db9836fdefdc779573082c788e3ddb3ef73', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 '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,
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, h("label", { key: '3083e4f2a624e3b268396acb4415f7c6ac44d851', class: "range-wrapper", id: "range-label" }, h("div", { key: '47b92f94d2a0381dd7c5cd3dda54ed2942096715', class: {
+            }) }, h("label", { key: 'e14c56db4d1eef11a3a0639c4bbed368041fc3eb', class: "range-wrapper", id: "range-label" }, h("div", { key: '16d125b0af19fdfa3663731657a7cca51a7ed442', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '5341da8d19eb29091df680978a0e20cc8f2eec65', class: "native-wrapper" }, h("slot", { key: '09f1437078032676695442d8c827a16faa7dffe2', name: "start" }), this.renderRangeSlider(), h("slot", { key: '02b7781970ea4d44f10b5f4627a2ca36eca45f85', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '545cc52a3e675e9df328dab537a4e44b7f3c59f8', class: "native-wrapper" }, h("slot", { key: 'ac54b45a21c9db231ebe11498d508d05864b56fb', name: "start" }), this.renderRangeSlider(), h("slot", { key: '7182dba53df2ff878d572b30afda64b37082c82e', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -754,7 +814,7 @@ const Range = class {
         "value": ["valueChanged"]
     }; }
 };
-const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
+const renderKnob = (rtl, { knob, position, dualKnobs, value, ratio, min, max, disabled, activated, focused, hovered, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, onKnobMouseEnter, onKnobMouseLeave, }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
@@ -775,16 +835,66 @@ const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin,
                 ev.preventDefault();
                 ev.stopPropagation();
             }
-        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
+        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, onMouseEnter: () => onKnobMouseEnter(knob), onMouseLeave: onKnobMouseLeave, class: {
             'range-knob-handle': true,
-            'range-knob-a': knob === 'A',
-            'range-knob-b': knob === 'B',
+            'range-knob-handle-a': knob === 'A',
+            'range-knob-handle-b': knob === 'B',
             'range-knob-pressed': pressed,
             'range-knob-min': value === min,
             'range-knob-max': value === max,
             'ion-activatable': true,
             'ion-focusable': true,
-        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
+            'ion-focused': focused,
+        }, part: [
+            'knob-handle',
+            dualKnobs && knob === 'A' && 'knob-handle-a',
+            dualKnobs && knob === 'B' && 'knob-handle-b',
+            dualKnobs && position === 'lower' && 'knob-handle-lower',
+            dualKnobs && position === 'upper' && 'knob-handle-upper',
+            pressed && 'pressed',
+            focused && 'focused',
+            hovered && 'hover',
+            activated && 'activated',
+        ]
+            .filter(Boolean)
+            .join(' '), style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: [
+            'pin',
+            dualKnobs && knob === 'A' && 'pin-a',
+            dualKnobs && knob === 'B' && 'pin-b',
+            dualKnobs && position === 'lower' && 'pin-lower',
+            dualKnobs && position === 'upper' && 'pin-upper',
+            pressed && 'pressed',
+            focused && 'focused',
+            hovered && 'hover',
+            activated && 'activated',
+        ]
+            .filter(Boolean)
+            .join(' ') }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: [
+            'knob',
+            dualKnobs && knob === 'A' && 'knob-a',
+            dualKnobs && knob === 'B' && 'knob-b',
+            dualKnobs && position === 'lower' && 'knob-lower',
+            dualKnobs && position === 'upper' && 'knob-upper',
+            pressed && 'pressed',
+            focused && 'focused',
+            hovered && 'hover',
+            activated && 'activated',
+        ]
+            .filter(Boolean)
+            .join(' ') })));
+};
+/**
+ * Returns whether the given knob is at the lower or upper position based
+ * on current ratios for the given knob.
+ */
+const getKnobPosition = (knob, ratioA, ratioB, dualKnobs) => {
+    if (dualKnobs) {
+        if (knob === 'A') {
+            return ratioA <= ratioB ? 'lower' : 'upper';
+        }
+        return ratioB <= ratioA ? 'lower' : 'upper';
+    }
+    return 'lower';
 };
 const ratioToValue = (ratio, min, max, step) => {
     let value = (max - min) * ratio;