feat(range): add classes to the range when the value is at the min or max

[brandyscarney]

Issue number: N/A

---

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.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.7.17-dev.11768943212.1b316931

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jan 20, 2026 9:08pm

[thetaPC]

LGTM

[rdlabo]

Great work — thank you for this improvement!

I noticed one potential limitation: since dual-knobs is not reflected in the DOM, using [dualKnobs]="true" makes this approach difficult to use in practice. We may want to think about how dual-knobs should be handled.

Two possible options could be:

1. Also set a .use-dual-knobs class (this would be the quickest solution).
2. When dual-knobs is enabled, provide part="knob knob-a" / part="knob knob-b".

ex:

  &:not(.dual-knobs).range-pressed {
    &.range-value-min::part(knob) {}
    &.range-value-max::part(knob) {}
  }

  &.dual-knobs.range-pressed {
    &.range-value-min::part(knob-a) {}
    &.range-value-max::part(knob-b) {}
  }

Either of these would greatly expand how this can be leveraged.