[Range] Update names and anatomy based on CSSWG decision

[brechtDR]

The CSSWG has decided to use the slider-prefix in pseudo-elements for input[type="range"]

w3c/csswg-drafts#9830

I the current Open UI explainer, this is still different, should we update these names?

Current naming we have is:

::range-track: Represents the main track of the range input.
::range-fill: Represents the filled portion of the track.
::range-thumb: Represents the draggable handle(s).
::range-tick: Represents individual tick marks on the range input.
::range-tick-label: Represents the label associated with each tick mark. This pseudo-element should be able to handle the content property for custom content. By default, the content is the value of the tick.
::range-segment: Represents sections of the track between handles in multi-handle ranges.

Extra question: Do we simply change "range" with "slider"? Or is it interesting to keep "range" for things such as segments?

[lukewarlow]

I think swapping range for slider makes sense for each of them. Perhaps slider-track-segment to be more explicit.

Fwiw slider naming comes I think from the aria role(among other things).

[lukewarlow]

We should also update the structure to match CSS's see https://drafts.csswg.org/css-forms/#slider-pseudos

Namely the ticks and thumbs should be siblings of track NOT children.

[css-meeting-bot]

The Open UI Community Group just discussed [Range] Update names and anatomy based on CSSWG decision, and agreed to the following:

• RESOLVED: Rename every instance of range to slider following the new forms draft by the CSSWG

The full IRC log of that discussion

<masonf> q+
<gregwhitworth> ack masonf
<frehner> brecht_dr there recently was a CSSWG draft for renaming elements; one was input type range. Should we rename everything to slider or keep "range"? Do we rename it?
<keithamus> s/brecht_dr/brecht_dr:/
<lwarlow> q+
<gregwhitworth> q+
<frehner> masonf: I think we should. Do you know of any?
<gregwhitworth> ack lwarlow
<brecht_dr> q+
<frehner> lwarlow: My vote is to rename everything to slider. Maybe "meter"? I don't think it's worth one being range and everything else slider. Aria-role is slider as well. If we didn't have input then we would just make a "slider" anyway. We should update the structure.
<frehner> lwarlow: When CSS Forms gets slider ticks, then we can move that there and openui can use it. Then this thing is the additional stuff not there yet, like thumbs
<gregwhitworth> https://open-ui.org/components/slider.research.parts/
<gregwhitworth> ack gregwhitworth
<frehner> gregwhitworth: We started with slider so I'm good. I expect we'll use this in "meter".
<frehner> grewhitworth: Someone from Yamaha needed radial ranges and meters. Currently doing it custom, wanted it to be standard. There are real world use cases for 0-100
<lwarlow> Yeah many slider things would be input[type=range], meter, progress, and probably input[switch=checkbox][switch]
<gregwhitworth> ack brecht_dr
<frehner> brecht_dr: Responding to Luke: about the structure, I could use some help. I have a problem with recreating that structure in a beautiful way. Please help.
<frehner> brecht_dr: We have a select one, I need some help there. To help make sense for those working on the browser side of things
<frehner> gregwhitworth: do you want to put a proposal up then?
<brecht_dr> Proposed resolution: Rename every instance of range to slider following the new forms draft by the CSSWG
<lwarlow> +q
<keithamus> +1
<masonf> +1
<lwarlow> +1
<lwarlow> q-
<gregwhitworth> +1
<masonf> +z
<masonf> +a
<brecht_dr> RESOLVED: Rename every instance of range to slider following the new forms draft by the CSSWG