diff --git a/light9/fade/Light9FadeUi.ts b/light9/fade/Light9FadeUi.ts
--- a/light9/fade/Light9FadeUi.ts
+++ b/light9/fade/Light9FadeUi.ts
@@ -1,13 +1,12 @@
-import { fastSlider, fastSliderLabel, provideFASTDesignSystem } from "@microsoft/fast-components";
 import debug from "debug";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
+import { shortShow, showRoot } from "../web/show_specific";
 import { SyncedGraph } from "../web/SyncedGraph";
-import { shortShow, showRoot } from "../web/show_specific";
 export { EditChoice } from "../web/EditChoice";
-provideFASTDesignSystem().register(fastSlider(), fastSliderLabel());
+export { Light9Fader } from "./Light9Fader";
 
 debug.enable("*");
 const log = debug("fade");
@@ -19,6 +18,7 @@ export class Light9FadeUi extends LitEle
     css`
       :host {
         display: block;
+        user-select: none; /* really this is only desirable during slider drag events */
       }
     `,
   ];
@@ -30,7 +30,7 @@ export class Light9FadeUi extends LitEle
 
       <div id="fps"></div>
 
-      ${this.faders.map((fd) => html` <light9-fader .uri=${fd}></light9-fader> `)}
+      ${this.faders.map((fd) => html` <light9-effect-fader .uri=${fd}></light9-effect-fader> `)}
     `;
   }
 
@@ -62,8 +62,8 @@ export class Light9FadeUi extends LitEle
   }
 }
 
-@customElement("light9-fader")
-export class Light9Fader extends LitElement {
+@customElement("light9-effect-fader")
+export class Light9EffectFader extends LitElement {
   static styles = [
     css`
       :host {
@@ -71,24 +71,15 @@ export class Light9Fader extends LitElem
         border: 2px gray outset;
         background: #272727;
       }
-      fast-slider {
-        height: 256px;
-      }
-      fast-slider > .track {
-        background: #e3bbc0;
-        box-shadow: 0 0 8px;
-      }
-      fast-slider {
-        --accent-foreground-rest: #0a0a0c;
+      light9-fader {
+        margin: 4px;
+        width: 100%;
       }
     `,
   ];
   render() {
     return html`
-      <fast-slider orientation="vertical" .value=${this.value} step=${1 / 255} min="1" max="0" @change=${this.onSliderInput}>
-        <fast-slider-label label="0"></fast-slider-label>
-        <fast-slider-label label="1.0"></fast-slider-label>
-      </fast-slider>
+      <light9-fader .value=${this.value} @change=${this.onSliderInput}></light9-fader>
       <div>${this.value.toPrecision(3)}</div>
       <div>eff: <edit-choice .uri=${this.effect} @edited=${this.onEffectChange}></edit-choice></div>
       <div>attr: <edit-choice .uri=${this.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div>
@@ -153,7 +144,7 @@ export class Light9Fader extends LitElem
     }
     const U = this.graph.U();
     const prev = this.value;
-    const v: number = (ev.target as any).valueAsNumber;
+    const v: number = ev.detail.value;
     this.value = parseFloat(v.toPrecision(3)); // rewrite pls
     if (this.value == prev) {
       return;