From fac1a6673c88a531f1d79656be4eb544f235f819 Mon Sep 17 00:00:00 2001 From: Brandy Smith Date: Tue, 27 Jan 2026 14:20:25 -0500 Subject: [PATCH 01/20] feat(range): add classes to the range when the value is at the min or max (#30932) ## What is the current behavior? Range adds classes to the knobs at `min` and `max`, but the host element doesn't reflect those states. ## What is the new behavior? - Adds `range-value-min` and `range-value-max` when the value is at the `min` or `max`, respectively. - Adds a spec test verifying the classes are applied properly. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> --- core/src/components/range/range.tsx | 11 ++- core/src/components/range/test/range.spec.ts | 98 ++++++++++++++++++++ 2 files changed, 108 insertions(+), 1 deletion(-) diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index d39e9732e82..431dbe4b7fe 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, dualKnobs, min, max } = 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, })} >