[css-forms-1] Add pseudo-elements for slider-like controls.

Fixes #4410

Author: nt1m

css-forms-1/Overview.bs

@@ -12,7 +12,7 @@ Abstract: This document is currently a loosely-structured set of ideas and inspi
 Warning: not ready
 </pre>
 
-# New Pseudo-Elements # {#pseudos}
+# Pseudo-Elements # {#pseudo-elements}
 
 This section defines some pseudo-elements for styling parts of form elements.
 
@@ -79,6 +79,64 @@ This section defines some pseudo-elements for styling parts of form elements.
   element</a>, preceding any boxes generated by the ''::before''
   pseudo-element, with content as specified by 'content'.
 
+## Styling parts of [=slider-like controls=]: the ''::slider-thumb'', ''::slider-track'', ''::slider-fill'' and ''::slider-options-track'' pseudo-elements ## {#slider-pseudos}
+
+  <dfn>Slider-like controls</dfn> are form controls that represent progress.
+  That progress may be adjustable by the user.
+
+  The list of [=slider-like controls=] depends on the host language. For HTML, this corresponds to:
+
+  - ''&lt;progress>''
+  - ''&lt;meter>''
+  - ''&lt;input>'' elements with `type="range"`
+  - ''&lt;input>'' elements with `type="checkbox" switch`
+
+
+  The following pseudo-elements are provided to style their different parts:
+
+  <dl export>
+    <dt><dfn>::slider-thumb</dfn>
+    <dd>
+      The ''::slider-thumb'' pseudo-element represents
+      the portion that allows the user to adjust the progress of the control.
+
+      That portion may be omitted for controls where the progress is not adjustable.
+      Disabled controls should provide this portion if the enabled state allows adjusting the progress.
+
+      NOTE: It is typically natively rendered as a circle in most user agents.
+
+    <dt><dfn>::slider-track</dfn>
+    <dd>
+      The ''::slider-track'' pseudo-element represents the portion containing
+      both the progressed and unprogressed portions of the control.
+
+    <dt><dfn>::slider-fill</dfn>
+    <dd>
+      The ''::slider-fill'' pseudo-element represents
+      the portion containing the progressed portion of the control.
+
+      When the progress of control is undetermined (like with ''&ltprogress indeterminate>''),
+      the user agent is expected to give this portion an inline-size of zero.
+
+    <dt><dfn>::slider-options-track</dfn>
+    <dd>
+      The ''::slider-options-track'' pseudo-element represents the portion containing
+      the options. It is expected to render at the same width as ''::slider-track''
+      and underneath it in the block direction.
+
+      With `appearance: auto`, the user agent may draw tickmarks
+      corresponding to the options given by the associated `<datalist>`.
+  </dl>
+
+  These pseudo-elements are [=tree-abiding pseudo-elements=] and their structure is expected to be the following:
+
+  ```
+      <input type="range">
+      ├─ ::slider-track
+      │  └─ ::slider-fill
+      ├─ ::slider-thumb
+      └─ ::slider-options-track
+  ```
 
 <h2 class="no-num non-normative" id="changes">Appendix: Explorations</h2>