[css-forms-1] Define range slider datalist integration

[lukewarlow]

While generally datalist may be considered out of scope for level 1 of this spec as it (aside from select) seeks to address just the in-page aspects of controls. Mason raised a good point that for range inputs datalist actually does effect the in-page control. For this reason I think we should seek to solve that specific case as part of level 1.

It was also raised on BlueSky that the range inputs ticks should actually be labelable. The HTML spec has an example which suggests this works today but unfortunately no browser seems to do this in auto appearance. We should resolve that for base appearance.

One more comment here - datalist already interacts with the in-page control in some browsers in some cases. That feels like that should be standardized also. For example:

<input type=range list=foo>
<datalist id=foo>
  <option value=1>
  <option value=65>
  <option value=90>
</datalist>

Renders like this in Chrome:

Originally posted by @mfreed7 in #11851 (comment)

[lukewarlow]

https://open-ui.org/components/enhanced-range-input.explainer/ - the work in progress OpenUI proposal has a proposed ::slider-tick and ::slider-tick-label. These could perhaps be functional and take an index. These obviously need some more design consideration. Perhaps the label should chain from the tick pseudo for example.