[css-forms-1] Add slider- prefix to slider pseudo-element names

Also correct markup for indeterminate progress element.

Author: lukewarlow

css-forms-1/Overview.bs

@@ -196,9 +196,9 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
         <td>`<progress>`</td>
         <td rowspan=4>
         <pre>
-        ├─ ''::track''
-        │  └─ ''::fill''
-        └─ ''::thumb''
+        ├─ ''::slider-track''
+        │  └─ ''::slider-fill''
+        └─ ''::slider-thumb''
         </pre>
         </td>
       </tr>
@@ -345,44 +345,42 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
     <pre class="lang-css">:indeterminate::checkmark { background-image: url(...) }</pre>
   </div>
 
-## Styling Parts of [=Slider-Like Controls=]: the ''::thumb'', ''::track'' and ''::fill'' pseudo-elements ## {#slider-pseudos}
-
-  ISSUE(9830): Naming is still under discussion.
+## Styling Parts of [=Slider-Like Controls=]: the ''::slider-thumb'', ''::slider-track'' and ''::slider-fill'' pseudo-elements ## {#slider-pseudos}
 
   <dfn>Slider-like controls</dfn> are form controls that represent progress.
   That progress may be adjustable by the user.
 
   The following pseudo-elements are provided to style their different parts:
 
   <dl export>
-    <dt><dfn>::thumb</dfn>
+    <dt><dfn>::slider-thumb</dfn>
     <dd>
-      The ''::thumb'' pseudo-element represents
+      The ''::slider-thumb'' pseudo-element represents
       the portion that allows the user to adjust the progress of the control.
 
       NOTE: It is typically natively rendered as a circle in most user agents.
 
-    <dt><dfn>::track</dfn>
+    <dt><dfn>::slider-track</dfn>
     <dd>
-      The ''::track'' pseudo-element represents the portion containing
+      The ''::slider-track'' pseudo-element represents the portion containing
       both the progressed and unprogressed portions of the control.
 
-    <dt><dfn>::fill</dfn>
+    <dt><dfn>::slider-fill</dfn>
     <dd>
-      The ''::fill'' pseudo-element represents
+      The ''::slider-fill'' pseudo-element represents
       the portion containing the progressed portion of the control.
 
-      When the progress of control is undetermined (like with ''&lt;progress indeterminate>''),
+      When the progress of control is indeterminate (like with ''&lt;progress>''),
       the user agent must give this portion an inline-size of zero.
   </dl>
 
   These pseudo-elements are [=fully styleable pseudo-elements=] and their structure is the following:
 
   ```
       <input type="range">
-      ├─ ::track
-      │  └─ ::fill
-      └─ ::thumb
+      ├─ ::slider-track
+      │  └─ ::slider-fill
+      └─ ::slider-thumb
   ```
 
   The list of [=slider-like controls=] depends on the host language. For HTML, this corresponds to:
@@ -636,19 +634,19 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
 
     <dt><dfn>left-to-right</dfn></dt>
     <dd>
-      The [=slider-like control=] is rendered horizontally and ''::fill'' is left-aligned within the control.
+      The [=slider-like control=] is rendered horizontally and ''::slider-fill'' is left-aligned within the control.
 
     <dt><dfn>right-to-left</dfn></dt>
     <dd>
-      The [=slider-like control=] is rendered horizontally and ''::fill'' is right-aligned within the control.
+      The [=slider-like control=] is rendered horizontally and ''::slider-fill'' is right-aligned within the control.
 
     <dt><dfn>top-to-bottom</dfn></dt>
     <dd>
-      The [=slider-like control=] is rendered vertically and ''::fill'' is top-aligned within the control.
+      The [=slider-like control=] is rendered vertically and ''::slider-fill'' is top-aligned within the control.
 
     <dt><dfn>bottom-to-top</dfn></dt>
     <dd>
-      The [=slider-like control=] is rendered vertically and ''::fill'' is bottom-aligned within the control.
+      The [=slider-like control=] is rendered vertically and ''::slider-fill'' is bottom-aligned within the control.
 
   </dl>
 
@@ -683,7 +681,7 @@ input:not([type=file], [type=range]),
 textarea,
 button,
 ::file-selector-button,
-::track,
+::slider-track,
 select,
 meter,
 progress {
@@ -697,16 +695,16 @@ progress {
 ISSUE: Refine meter, progress, switch and range input styling.
 
 ```css
-::track {
+::slider-track {
   height: 1em;
 }
 
-::fill {
+::slider-fill {
   height: 100%;
   background-color: currentColor;
 }
 
-::thumb {
+::slider-thumb {
   border-radius: 0;
   border: none;
   background-color: currentColor;