From 90730d5d8e7789823b4a20888efe64b258a443ae Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 20 Jan 2026 15:48:58 -0500
Subject: [PATCH 1/2] feat(range): add classes to the range when the value is
 at the min or max

---
 core/src/components/range/range.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index d39e9732e82..cc33e101440 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -883,7 +883,7 @@ export class Range implements ComponentInterface {
   }
 
   render() {
-    const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+    const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label, min, max, dualKnobs } = this;
 
     const inItem = hostContext('ion-item', el);
 
@@ -906,6 +906,13 @@ export class Range implements ComponentInterface {
 
     const mode = getIonMode(this);
 
+    /**
+     * Determine if any knob is at the min or max value to
+     * apply Host classes for styling.
+     */
+    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 (
@@ -922,6 +929,8 @@ export class Range implements ComponentInterface {
           [`range-label-placement-${labelPlacement}`]: true,
           'range-item-start-adjustment': needsStartAdjustment,
           'range-item-end-adjustment': needsEndAdjustment,
+          'range-value-min': valueAtMin,
+          'range-value-max': valueAtMax,
         })}
       >
         <label class="range-wrapper" id="range-label">

From b3169315b191323929c1923405a451d77e9cd142 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 20 Jan 2026 15:49:23 -0500
Subject: [PATCH 2/2] test(range): add a spec test verifying the min/max
 classes are applied properly

---
 core/src/components/range/test/range.spec.ts | 98 ++++++++++++++++++++
 1 file changed, 98 insertions(+)

diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts
index 0d83082d399..33c9b0021d1 100644
--- a/core/src/components/range/test/range.spec.ts
+++ b/core/src/components/range/test/range.spec.ts
@@ -253,3 +253,101 @@ describe('range: item adjustments', () => {
     });
   });
 });
+
+describe('range: value state classes', () => {
+  it('should apply range-value-min class when value is at min', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range min="0" max="100" value="0"></ion-range>`,
+    });
+
+    const range = page.body.querySelector('ion-range')!;
+
+    expect(range.classList.contains('range-value-min')).toBe(true);
+    expect(range.classList.contains('range-value-max')).toBe(false);
+  });
+
+  it('should apply range-value-max class when value is at max', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range min="0" max="100" value="100"></ion-range>`,
+    });
+
+    const range = page.body.querySelector('ion-range')!;
+
+    expect(range.classList.contains('range-value-max')).toBe(true);
+    expect(range.classList.contains('range-value-min')).toBe(false);
+  });
+
+  it('should not apply range-value-min or range-value-max classes when value is in the middle', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range min="0" max="100" value="50"></ion-range>`,
+    });
+
+    const range = page.body.querySelector('ion-range')!;
+
+    expect(range.classList.contains('range-value-min')).toBe(false);
+    expect(range.classList.contains('range-value-max')).toBe(false);
+  });
+
+  it('should apply range-value-min class when lower knob is at min in dual knobs', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+    });
+
+    const range = page.body.querySelector('ion-range')!;
+    range.value = { lower: 0, upper: 50 };
+
+    await page.waitForChanges();
+
+    expect(range.classList.contains('range-value-min')).toBe(true);
+    expect(range.classList.contains('range-value-max')).toBe(false);
+  });
+
+  it('should apply range-value-max class when upper knob is at max in dual knobs', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+    });
+
+    const range = page.body.querySelector('ion-range')!;
+    range.value = { lower: 50, upper: 100 };
+
+    await page.waitForChanges();
+
+    expect(range.classList.contains('range-value-max')).toBe(true);
+    expect(range.classList.contains('range-value-min')).toBe(false);
+  });
+
+  it('should apply range-value-min and range-value-max classes for dual knobs when both are at boundaries', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+    });
+
+    const range = page.body.querySelector('ion-range')!;
+    range.value = { lower: 0, upper: 100 };
+
+    await page.waitForChanges();
+
+    expect(range.classList.contains('range-value-min')).toBe(true);
+    expect(range.classList.contains('range-value-max')).toBe(true);
+  });
+
+  it('should not apply range-value-min or range-value-max classes for dual knobs when neither is at boundaries', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+    });
+
+    const range = page.body.querySelector('ion-range')!;
+    range.value = { lower: 25, upper: 75 };
+
+    await page.waitForChanges();
+
+    expect(range.classList.contains('range-value-min')).toBe(false);
+    expect(range.classList.contains('range-value-max')).toBe(false);
+  });
+});