Answer five things the panel got wrong

- A tile no longer lifts under the pointer. A finger does not move away
  afterwards the way a cursor does, so whatever hover raised stayed
  raised until something else was touched: a tile stuck, not answering.
- The ground's blobs wander a closed path on their own clock instead of
  sliding back and forth along one line, which read as things moving
  rather than as light in a room.
- A bar is one grid now, its rows borrowing its columns, so names of
  different lengths no longer start and end their tracks in different
  places — two bars that share no baseline cannot be compared, which is
  the one thing a stack of them is for. The names read rightward into
  their tracks, with room either side.
- A reading on its way somewhere is written to as many decimals as the
  value it is heading for. Without that a slider stepping in halves
  passed through 22.37460937 on its way to 24: a number nobody asked
  for, a different width every frame.
- The brightness column is the same control as the slider widget's,
  stood on its end and thicker, and exactly as tall as the disc beside
  it. Getting there meant drawing a slider's rail, fill and handle
  rather than styling `::-webkit-slider-*`: those need one set of rules
  per orientation, each with its own centring quirk, and the handle
  landed off its track when the writing mode turned. The native input
  stays, laid transparent over the top, so the keyboard, the pointer and
  every `aria-` are still its.

frontend/src/components/Dashboard/ui/glass/Controls.tsx

@@ -77,37 +77,45 @@ export function Switch(props: SwitchProps) {
 
 export function Slider(props: SliderProps) {
   const { fraction, inputProps, marks } = useSliderDrag(props)
-  const vertical = props.orientation === "vertical"
+  const orientation = props.orientation ?? "horizontal"
   return (
     <div
-      className={cn("dui-slider gl-slider", vertical ? "h-full" : "w-full")}
+      className={cn(
+        "dui-slider gl-slider",
+        orientation === "horizontal" && "w-full",
+      )}
+      data-orientation={orientation}
       style={{ "--dui-fraction": fraction } as React.CSSProperties}
     >
-      <div
-        className={cn("flex min-w-0 flex-col", vertical ? "h-full" : "w-full")}
-      >
-        <input
-          {...inputProps}
-          data-orientation={props.orientation ?? "horizontal"}
-        />
-        {marks.length > 0 ? (
-          // Decoration: the input itself announces min, max and where it stands.
-          <div aria-hidden className="gl-ticks">
-            {marks.map((mark) => (
-              <span
-                key={mark.percent}
-                className="absolute top-0"
-                style={{
-                  left: `${mark.percent}%`,
-                  transform: `translateX(-${mark.percent}%)`,
-                }}
-              >
-                {mark.label}
-              </span>
-            ))}
-          </div>
-        ) : null}
+      <div className="dui-slider-body">
+        <span className="dui-slider-rail" aria-hidden>
+          <span className="dui-slider-fill" />
+        </span>
+        {/* The control itself, laid transparent over what is drawn: it keeps
+            the keyboard, the pointer and every `aria-`, and owes the look
+            nothing. */}
+        <input {...inputProps} className="dui-slider-input" />
+        <span className="dui-slider-thumb" aria-hidden />
       </div>
+      {marks.length > 0 ? (
+        // Decoration: the input itself announces min, max and where it stands.
+        <div aria-hidden className="dui-ticks">
+          {marks.map((mark) => (
+            <span
+              key={mark.percent}
+              className="absolute top-0"
+              // Shifted by its own share of itself: the first label sits flush
+              // left and the last flush right, so neither hangs off the tile.
+              style={{
+                left: `${mark.percent}%`,
+                transform: `translateX(-${mark.percent}%)`,
+              }}
+            >
+              {mark.label}
+            </span>
+          ))}
+        </div>
+      ) : null}
     </div>
   )
 }