[css-forms-1] Improve slider UA styles (#12427)

* [css-forms-1] Add improved slider UA styles

Positioning of ::slider-thumb and sizing of ::slider-fill for range still need to be added.

Author: lukewarlow

css-forms-1/Overview.bs

@@ -842,36 +842,75 @@ select {
 
 ## Sliders ## {#stylesheet-sliders}
 
-ISSUE: Refine meter, progress, switch and range input styling.
+ISSUE(12267): Refine meter, progress, switch and range input styling.
 
 ```css
+input[type="checkbox][switch],
+input[type="range"] {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  inline-size: 100%;
+}
+
 input[type="checkbox"][switch]::slider-track,
 input[type="range"]::slider-track,
 meter::slider-track,
 progress::slider-track {
-  height: 1em;
+  block-size: 1em;
+  inline-size: 100%;
+}
+
+input[type=range]::slider-track {
+  block-size: 0.5em;
+}
+
+input[type=checkbox][switch]::slider-track {
+  border-radius: 1em;
 }
 
 input[type="checkbox"][switch]::slider-fill,
 input[type="range"]::slider-fill,
 meter::slider-fill,
 progress::slider-fill {
-  height: 100%;
+  block-size: 100%;
   background-color: currentColor;
 }
 
 progress:indeterminate::slider-fill {
   inline-size: 0;
 }
 
+input[type="range"]::slider-fill,
+input[type=checkbox][switch]::slider-fill {
+  background-color: color-mix(currentColor 25%, transparent);
+  border-radius: inherit;
+
+  block-size: 100%;
+}
+
+input[type=checkbox][switch]::slider-fill {
+  inline-size: 0%;
+}
+
+input[type="checkbox"][switch]:checked::slider-fill {
+  inline-size: 100%;
+}
+
 input[type="checkbox"][switch]::slider-thumb,
 input[type="range"]::slider-thumb {
   border-radius: 0;
   border: none;
   background-color: currentColor;
   appearance: none;
-  width: 1em;
-  height: 100%;
+  inline-size: 1em;
+  block-size: 1em;
+  border-radius: 100%;
+  position: absolute;
+}
+
+input[type=checkbox][switch]:checked::slider-thumb {
+  inset-inline-end: 0;
 }
 ```