--- 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;
   }