--- a/web/fade/Light9Fader.ts	Thu May 16 16:15:33 2024 -0700
+++ b/web/fade/Light9Fader.ts	Fri May 17 13:25:46 2024 -0700
@@ -21,10 +21,12 @@
       }
       #handle {
         background: gray;
-        border: 5px gray outset;
+        border: 3px outset #838499;
         position: relative;
-        left: 0;
+        left: 0px;
         right: -25px;
+        border-radius: 4px;
+        margin: 0 1px;
       }
     `,
   ];
@@ -34,7 +36,7 @@
   @query("#handle") handleEl!: HTMLElement;
 
   troughHeight = 80 - 2 - 2 - 5 - 5;
-  handleHeight = 10;
+  handleHeight = 16;
 
   drag?: Drag;
   unmutedValue: number = 1;
@@ -46,11 +48,10 @@
   protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     super.update(changedProperties);
     if (changedProperties.has("value")) {
-      
     }
   }
   valueChangedFromUi() {
-    this.value= clamp(this.value, 0, 1)
+    this.value = clamp(this.value, 0, 1);
     this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
   }
 
@@ -80,7 +81,7 @@
       ev.stopPropagation();
       if (ev.buttons == 1) {
         this.value = this.sliderValue(ev.offsetY);
-        this.valueChangedFromUi()
+        this.valueChangedFromUi();
         this.drag = new Drag(ev.clientY, this.value);
       } else if (ev.buttons == 2) {
         // RMB in trough
@@ -94,8 +95,8 @@
 
     this.addEventListener("wheel", (ev: WheelEvent) => {
       ev.preventDefault();
-      this.value += ev.deltaY / this.troughHeight * -.05;
-      this.valueChangedFromUi()
+      this.value += (ev.deltaY / this.troughHeight) * -0.03;
+      this.valueChangedFromUi();
     });
 
     const maybeDrag = (ev: MouseEvent) => {
@@ -121,12 +122,12 @@
       // unmute
       this.value = this.unmutedValue;
     }
-    this.valueChangedFromUi()
+    this.valueChangedFromUi();
   }
   onMouseDrag(dy: number) {
     if (this.drag === undefined) throw "unexpected";
     this.value = this.drag.startDragValue - dy / this.troughHeight;
-    this.valueChangedFromUi()
+    this.valueChangedFromUi();
   }
 
   onMouseUpAnywhere() {
@@ -134,7 +135,7 @@
   }
 
   sliderTopY(value: number): number {
-    const usableY = this.troughHeight - this.handleHeight;
+    const usableY = this.troughHeight - this.handleHeight / 2 - 1;
     const yAdj = this.handleHeight / 2 - 5 - 2;
     return (1 - value) * usableY + yAdj;
   }

--- a/web/metrics/ServiceButtonRow.ts	Thu May 16 16:15:33 2024 -0700
+++ b/web/metrics/ServiceButtonRow.ts	Fri May 17 13:25:46 2024 -0700
@@ -5,7 +5,7 @@
 @customElement("service-button-row")
 export class ServiceButtonRow extends LitElement {
   @property() name: string = "?";
-  @property({ type:Boolean, attribute: "metrics" }) hasMetrics: boolean = false;
+  @property({ type: Boolean, attribute: "metrics" }) hasMetrics: boolean = false;
   static styles = [
     css`
       :host {
@@ -57,10 +57,10 @@
       </div>
 
       ${this.hasMetrics ? html`<div id="stats"><stats-line name="${this.name}"></div>` : ""}
-      `;
+    `;
   }
 
   click() {
-    window.open(this.name + "/", "_blank", "scrollbars=1,resizable=1,titlebar=0,location=0");
+    window.open("/" + this.name + "/", "_blank", "scrollbars=1,resizable=1,titlebar=0,location=0");
   }
 }