Link input elements with a slider value

[brechtDR]

A question came up if there would be an easy way to link an input type to a range group / range input thumb.

This might be an interesting case for more than just range sliders. On top of my head, I was thinking of using id-linking to show the value. I think an input type number would be best in this case, instead of output, as the action would be desired both ways (adding a value in the input should move the thumb)

<rangegroup>
  <legend>Price</legend>
  <label>min<input type="range" reference="min-id" /></label>
  <label>max<input type="range" reference="min-id" /></label>
</rangegroup>
<input type="number"  id="min-id" />
<input type="number"  id="max-id" />

This reference attribute is purely a placeholder. I'd like to see if this is something for invokers, or if something new would be needed. (since invokers only go one way)

Other questions around this topic are:

• Should this be limited to a <rangegroup>? I think every sort of range input might benefit from this behavior.
• For rangegroup: should input automatically be attached in the api as pseudo-elements?

This was feedback that I collected at CSS Cafe 13/06/2026