@decidables/accumulable-elements 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/accumulable-elements",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "accumulable-elements: Web Components for visualizing the Diffusion Decision Model",
   "keywords": [
     "web component",
@@ -53,8 +53,8 @@
     "gulp": "^5.0.0"
   },
   "dependencies": {
-    "@decidables/accumulable-math": "^0.1.3",
-    "@decidables/decidables-elements": "^0.4.9",
+    "@decidables/accumulable-math": "^0.2.0",
+    "@decidables/decidables-elements": "^0.5.0",
     "@lit-labs/motion": "^1.0.7",
     "@observablehq/plot": "^0.6.16",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
@@ -62,5 +62,5 @@
     "lit": "^3.2.1",
     "regenerator-runtime": "^0.14.1"
   },
-  "gitHead": "00eb1274a09e86f55fff70b01b446f6729e608f3"
+  "gitHead": "0320347d03a20fb478784fe296c82f11018c276b"
 }

package/src/components/accumulable-control.js

@@ -198,7 +198,7 @@ export default class AccumulableControl extends AccumulableElement {
   render() {
     return html`
       <div class="holder">
-        ${this.trials
+        ${this.trials != null
           ? html`<decidables-slider class="trials" min="1" max="100" step="1" .value=${this.trials} @change=${this.setTrials.bind(this)} @input=${this.setTrials.bind(this)}>Trials</decidables-slider>`
           : html``}
         ${this.resample
@@ -210,13 +210,13 @@ export default class AccumulableControl extends AccumulableElement {
             </div>
           `
           : html``}
-        ${this.duration
+        ${this.duration != null
           ? html`<decidables-slider class="duration" min="10" max="2000" step="10" .value=${this.duration} @change=${this.setDuration.bind(this)} @input=${this.setDuration.bind(this)}>Duration</decidables-slider>`
           : html``}
-        ${this.coherence
+        ${this.coherence != null
           ? html`<decidables-slider class="coherence" min="0" max="1" step=".01" .value=${this.coherence} @change=${this.setCoherence.bind(this)} @input=${this.setCoherence.bind(this)}>Coherence</decidables-slider>`
           : html``}
-        ${this.color !== undefined
+        ${this.color != null
           ? html`
             <decidables-toggle class="color" @change=${this.chooseColor.bind(this)}>
               <span slot="label">Emphasis</span>

package/src/components/accumulable-response.js

@@ -95,9 +95,7 @@ export default class AccumulableResponse extends AccumulableElement {
     this.startTime = undefined; // Start time of current trial
     this.rt = undefined; // RT for current trial
 
-    this.correctCount = 0; // Count of Correct Trials
-    this.errorCount = 0; // Count of Error Trials
-    this.nrCount = 0; // Count of No Response trials
+    this.data = {};
 
     this.trials = []; // Record of trials in block
     this.alignState();
@@ -117,14 +115,13 @@ export default class AccumulableResponse extends AccumulableElement {
   }
 
   get totalPayoff() {
-    return ((this.correctCount * this.correctPayoff)
-      + (this.errorCount * this.errorPayoff)
-      + (this.nrCount * this.nrPayoff));
+    return ((this.data.correctCount * this.correctPayoff)
+      + (this.data.errorCount * this.errorPayoff)
+      + (this.data.nrCount * this.nrPayoff));
   }
 
   alignState() {
-    const stats = DDMMath.trials2stats(this.trials);
-    Object.assign(this, stats);
+    this.data = DDMMath.trials2stats(this.trials);
   }
 
   start(signal, trial) {
@@ -141,7 +138,6 @@ export default class AccumulableResponse extends AccumulableElement {
     this.state = 'feedback';
     if (this.response === undefined) {
       this.outcome = 'nr';
-      this.nrCount += 1;
       this.rt = undefined;
 
       this.trials.push({
@@ -170,10 +166,8 @@ export default class AccumulableResponse extends AccumulableElement {
     this.response = response;
     if (this.signal === this.response) {
       this.outcome = 'correct';
-      this.correctCount += 1;
     } else if (this.signal !== this.response) {
       this.outcome = 'error';
-      this.errorCount += 1;
     }
     this.trials.push({
       trial: this.trialCount,
@@ -194,16 +188,7 @@ export default class AccumulableResponse extends AccumulableElement {
         outcome: this.outcome,
         payoff: this.trialPayoff,
 
-        correctCount: this.correctCount,
-        errorCount: this.errorCount,
-        nrCount: this.nrCount,
-        accuracy: this.accuracy,
-        meanRT: this.meanRT,
-        correctMeanRT: this.correctMeanRT,
-        errorMeanRT: this.errorMeanRT,
-        sdRT: this.sdRT,
-        correctSDRT: this.correctSDRT,
-        errorSDRT: this.errorSDRT,
+        data: this.data,
 
         totalPayoff: this.totalPayoff,
       },
@@ -218,9 +203,6 @@ export default class AccumulableResponse extends AccumulableElement {
     this.signal = undefined;
     this.response = undefined;
     this.outcome = undefined;
-    this.correctCount = 0;
-    this.errorCount = 0;
-    this.nrCount = 0;
 
     this.trials = [];
     this.alignState();

package/src/components/ddm-fit-worker.js

@@ -3,14 +3,14 @@
 import DDMMath from '@decidables/accumulable-math';
 
 self.onmessage = (event) => {
-  const params = DDMMath.data2ez({...event.data, s: DDMMath.s});
+  const params = DDMMath.data2ez({...event.data, s: DDMMath.s.DEFAULT});
 
   // ##### Arbitrary default values!!!
   const a = !isNaN(params.a) ? params.a : 1.5;
   const z = !isNaN(params.z) ? params.z : 0.5;
   const v = !isNaN(params.v) ? params.v : 0.1;
   const t0 = !isNaN(params.t0) ? params.t0 : 100;
-  const s = !isNaN(params.s) ? params.s : DDMMath.s;
+  const s = !isNaN(params.s) ? params.s : DDMMath.s.DEFAULT;
 
   const predicted = {
     accuracy: DDMMath.azv2pC(a, z, v),

package/src/components/ddm-fit.js

@@ -1,6 +1,8 @@
 
 import {html, css} from 'lit';
 
+import DDMMath from '@decidables/accumulable-math';
+
 // Special Web Worker import for rollup-plugin-web-worker-loader
 import DDMFitWorker from 'web-worker:./ddm-fit-worker'; /* eslint-disable-line import/no-unresolved */
 
@@ -22,10 +24,10 @@ export default class DDMFit extends AccumulableElement {
   constructor() {
     super();
 
-    this.a = 1.2;
-    this.z = 0.35;
-    this.v = 1.5;
-    this.t0 = 150;
+    this.a = DDMMath.a.DEFAULT;
+    this.z = DDMMath.z.DEFAULT;
+    this.v = DDMMath.v.DEFAULT;
+    this.t0 = DDMMath.t0.DEFAULT;
 
     this.observed = {};
     this.predicted = {};

package/src/components/ddm-model.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import * as d3 from 'd3';
 
 import DDMMath from '@decidables/accumulable-math';
@@ -147,10 +147,10 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     this.human = false;
     this.trials = 10;
 
-    this.a = 1.2;
-    this.z = 0.35;
-    this.v = 1.5;
-    this.t0 = 150;
+    this.a = DDMMath.a.DEFAULT;
+    this.z = DDMMath.z.DEFAULT;
+    this.v = DDMMath.v.DEFAULT;
+    this.t0 = DDMMath.t0.DEFAULT;
 
     // this.s = null;
     // this.sz = null;
@@ -218,7 +218,7 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     while ((path.at(-1).e > bounds.lower) && (path.at(-1).e < bounds.upper)) {
       path.push({
         t: path.at(-1).t + (this.precision * 1000),
-        e: path.at(-1).e + drift + DDMMath.s * random(),
+        e: path.at(-1).e + drift + DDMMath.s.DEFAULT * random(),
       });
     }
     return path;
@@ -527,10 +527,25 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
 
         .t0z .point {
           fill: var(---color-element-emphasis);
+          stroke-width: 0;
 
           r: 6px;
         }
 
+        /* Make larger targets for touch users */
+        .interactive .touch {
+          stroke: #000000;
+          stroke-dasharray: none;
+          stroke-opacity: 0;
+        }
+
+        @media (pointer: coarse) {
+          .interactive .touch {
+            stroke-linecap: round;
+            stroke-width: 12;
+          }
+        }
+
         .measure {
           stroke-width: 2;
         }
@@ -731,18 +746,18 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
         // Clamp t0
         t0 = (shift === 'z')
           ? timeScale.invert(event.subject.x)
-          : (t0 < 0)
-            ? 0
-            : (t0 > 500)
-              ? 500
+          : (t0 < DDMMath.t0.MIN)
+            ? DDMMath.t0.MIN
+            : (t0 > DDMMath.t0.MAX)
+              ? DDMMath.t0.MAX
               : t0;
         // Clamp z
         z = (shift === 't0')
           ? (evidenceScale.invert(event.subject.y) + (this.a / 2)) / this.a
-          : (z < 0.01)
-            ? 0.01
-            : (z > 0.99)
-              ? 0.99
+          : (z < DDMMath.z.MIN)
+            ? DDMMath.z.MIN
+            : (z > DDMMath.z.MAX)
+              ? DDMMath.z.MAX
               : z;
         this.t0 = t0;
         this.z = z;
@@ -777,10 +792,10 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
         let v = ((evidenceScale.invert(event.y) - this.startingPoint)
           / (timeScale.invert(event.x) - this.t0)) * 1000;
         // Clamp drift rate
-        v = (v < 0.01)
-          ? 0.01
-          : (v > 5)
-            ? 5
+        v = (v < DDMMath.v.MIN)
+          ? DDMMath.v.MIN
+          : (v > DDMMath.v.MAX)
+            ? DDMMath.v.MAX
             : v;
         this.v = v;
         this.alignState();
@@ -806,20 +821,17 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
         const element = event.currentTarget;
         d3.select(element).classed('dragging', true);
       })
-      .on('drag', (event, datum) => {
+      .on('drag', (event) => {
         this.drag = true;
-        let boundary = evidenceScale.invert(event.y);
-        // Clamp boundaries to visible evidence
-        boundary = (boundary < this.scale.evidence.min)
-          ? this.scale.evidence.min
-          : (boundary > this.scale.evidence.max)
-            ? this.scale.evidence.max
-            : (datum.bound === 'upper' && boundary < 0.005)
-              ? 0.005
-              : (datum.bound === 'lower' && boundary > -0.005)
-                ? -0.005
-                : boundary;
-        this.a = Math.abs(boundary * 2);
+        const boundary = evidenceScale.invert(event.y);
+        let a = Math.abs(boundary * 2);
+        // Clamp a
+        a = (a < DDMMath.a.MIN)
+          ? DDMMath.a.MIN
+          : (a > DDMMath.a.MAX)
+            ? DDMMath.a.MAX
+            : a;
+        this.a = a;
         this.alignState();
         this.dispatchEvent(new CustomEvent('ddm-model-a', {
           detail: {
@@ -1530,6 +1542,8 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       });
     boundaryEnter.append('line')
       .classed('line', true);
+    boundaryEnter.append('line')
+      .classed('line touch', true);
     //  MERGE
     const boundaryMerge = boundaryEnter.merge(boundaryUpdate)
       .attr('tabindex', this.interactive ? 0 : null)
@@ -1537,25 +1551,33 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .on('keydown', this.interactive
         ? (event, datum) => {
           if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
-            let a = this.a; /* eslint-disable-line prefer-destructuring */
+            let {a} = this;
             switch (event.key) {
               case 'ArrowUp':
                 a += (datum.bound === 'upper')
-                  ? event.shiftKey ? 0.01 : 0.1
-                  : event.shiftKey ? -0.01 : -0.1;
+                  ? event.shiftKey
+                    ? DDMMath.a.STEP
+                    : DDMMath.a.JUMP
+                  : event.shiftKey
+                    ? -DDMMath.a.STEP
+                    : -DDMMath.a.JUMP;
                 break;
               case 'ArrowDown':
                 a += (datum.bound === 'upper')
-                  ? event.shiftKey ? -0.01 : -0.1
-                  : event.shiftKey ? 0.01 : 0.1;
+                  ? event.shiftKey
+                    ? -DDMMath.a.STEP
+                    : -DDMMath.a.JUMP
+                  : event.shiftKey
+                    ? DDMMath.a.STEP
+                    : DDMMath.a.JUMP;
                 break;
               default:
             }
-            // Clamp boundaries to visible evidence
-            a = (a < 0.01)
-              ? 0.01
-              : (a > this.scale.evidence.max * 2)
-                ? this.scale.evidence.max * 2
+            // Clamp a
+            a = (a < DDMMath.a.MIN)
+              ? DDMMath.a.MIN
+              : (a > DDMMath.a.MAX)
+                ? DDMMath.a.MAX
                 : a;
             this.a = a;
             this.alignState();
@@ -1591,6 +1613,18 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .attr('y2', (datum) => {
         return evidenceScale(datum.value);
       });
+    boundaryMerge.select('.line.touch')
+      .transition()
+      .duration(this.drag ? 0 : transitionDuration)
+      .ease(d3.easeCubicOut)
+      .attr('x1', timeScale(this.scale.time.min))
+      .attr('x2', timeScale(this.scale.time.max))
+      .attr('y1', (datum) => {
+        return evidenceScale(datum.value);
+      })
+      .attr('y2', (datum) => {
+        return evidenceScale(datum.value);
+      });
     //  EXIT
     boundaryUpdate.exit().remove();
 
@@ -1605,8 +1639,12 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .classed('drift', true);
     driftEnter.append('line')
       .classed('line', true);
+    driftEnter.append('line')
+      .classed('line touch', true);
     driftEnter.append('path')
       .classed('arrow', true);
+    driftEnter.append('path')
+      .classed('arrow touch', true);
     //  MERGE
     const driftMerge = driftEnter.merge(driftUpdate)
       .attr('tabindex', this.interactive ? 0 : null)
@@ -1614,21 +1652,25 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .on('keydown', this.interactive
         ? (event) => {
           if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
-            let v = this.v; /* eslint-disable-line prefer-destructuring */
+            let {v} = this;
             switch (event.key) {
               case 'ArrowUp':
-                v += event.shiftKey ? 0.01 : 0.1;
+                v += event.shiftKey
+                  ? DDMMath.v.STEP
+                  : DDMMath.v.JUMP;
                 break;
               case 'ArrowDown':
-                v -= event.shiftKey ? 0.01 : 0.1;
+                v -= event.shiftKey
+                  ? DDMMath.v.STEP
+                  : DDMMath.v.JUMP;
                 break;
               default:
             }
             // Clamp z
-            v = (v < 0.01)
-              ? 0.01
-              : (v > 5)
-                ? 5
+            v = (v < DDMMath.v.MIN)
+              ? DDMMath.v.MIN
+              : (v > DDMMath.v.MAX)
+                ? DDMMath.v.MAX
                 : v;
             this.v = v;
             this.alignState();
@@ -1663,12 +1705,20 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       });
     driftMerge.select('.line')
       .attr('x2', timeScale(200));
+    driftMerge.select('.line.touch')
+      .attr('x2', timeScale(200));
     driftMerge.select('.arrow')
       .attr('d', `
         M ${timeScale(200) - this.rem * 0.5},${-this.rem * 0.5}
         l ${this.rem * 0.5},${this.rem * 0.5}
         l ${-this.rem * 0.5},${this.rem * 0.5}
       `);
+    driftMerge.select('.arrow.touch')
+      .attr('d', `
+        M ${timeScale(200) - this.rem * 0.5},${-this.rem * 0.5}
+        l ${this.rem * 0.5},${this.rem * 0.5}
+        l ${-this.rem * 0.5},${this.rem * 0.5}
+      `);
     //  EXIT
     driftUpdate.exit().remove();
 
@@ -1683,8 +1733,10 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .classed('t0z', true);
     t0zEnter.append('line')
       .classed('line', true);
+    t0zEnter.append('line')
+      .classed('line touch', true);
     t0zEnter.append('circle')
-      .classed('point', true);
+      .classed('point touch', true);
     //  MERGE
     const t0zMerge = t0zEnter.merge(t0zUpdate)
       .attr('tabindex', this.interactive ? 0 : null)
@@ -1692,21 +1744,25 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .on('keydown', this.interactive
         ? (event) => {
           if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
-            let z = this.z; /* eslint-disable-line prefer-destructuring */
+            let {z} = this;
             switch (event.key) {
               case 'ArrowUp':
-                z += event.shiftKey ? 0.01 : 0.1;
+                z += event.shiftKey
+                  ? DDMMath.z.STEP
+                  : DDMMath.z.JUMP;
                 break;
               case 'ArrowDown':
-                z -= event.shiftKey ? 0.01 : 0.1;
+                z -= event.shiftKey
+                  ? DDMMath.z.STEP
+                  : DDMMath.z.JUMP;
                 break;
               default:
             }
             // Clamp z
-            z = (z < 0.01)
-              ? 0.01
-              : (z > 0.99)
-                ? 0.99
+            z = (z < DDMMath.z.MIN)
+              ? DDMMath.z.MIN
+              : (z > DDMMath.z.MAX)
+                ? DDMMath.z.MAX
                 : z;
             this.z = z;
             this.alignState();
@@ -1722,18 +1778,22 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
             let t0 = this.t0; /* eslint-disable-line prefer-destructuring */
             switch (event.key) {
               case 'ArrowRight':
-                t0 += event.shiftKey ? 1 : 10;
+                t0 += event.shiftKey
+                  ? DDMMath.t0.STEP
+                  : DDMMath.t0.JUMP;
                 break;
               case 'ArrowLeft':
-                t0 -= event.shiftKey ? 1 : 10;
+                t0 -= event.shiftKey
+                  ? DDMMath.t0.STEP
+                  : DDMMath.t0.JUMP;
                 break;
               default:
             }
             // Clamp t0
-            t0 = (t0 < 0)
-              ? 0
-              : (t0 > 500)
-                ? 500
+            t0 = (t0 < DDMMath.t0.MIN)
+              ? DDMMath.t0.MIN
+              : (t0 > DDMMath.t0.MAX)
+                ? DDMMath.t0.MAX
                 : t0;
             this.t0 = t0;
             this.alignState();
@@ -1765,6 +1825,14 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .attr('x2', (datum) => { return timeScale(datum.t0); })
       .attr('y1', (datum) => { return evidenceScale(datum.startingPoint); })
       .attr('y2', (datum) => { return evidenceScale(datum.startingPoint); });
+    t0zMerge.select('.line.touch')
+      .transition()
+      .duration(this.drag ? 0 : transitionDuration)
+      .ease(d3.easeCubicOut)
+      .attr('x1', timeScale(0))
+      .attr('x2', (datum) => { return timeScale(datum.t0); })
+      .attr('y1', (datum) => { return evidenceScale(datum.startingPoint); })
+      .attr('y2', (datum) => { return evidenceScale(datum.startingPoint); });
     t0zMerge.select('.point')
       .transition()
       .duration(this.drag ? 0 : transitionDuration)

package/src/components/ddm-parameters.js

@@ -2,6 +2,7 @@
 import {html, css} from 'lit';
 
 import '@decidables/decidables-elements/slider';
+import DDMMath from '@decidables/accumulable-math';
 
 import AccumulableElement from '../accumulable-element';
 
@@ -113,6 +114,26 @@ export default class DDMParameters extends AccumulableElement {
         decidables-slider  div {
           margin-bottom: 0.25rem;
         }
+
+        .a {
+          --decidables-slider-background-color: var(---color-a-light);
+          --decidables-slider-color: var(---color-a);
+        }
+
+        .z {
+          --decidables-slider-background-color: var(---color-z-light);
+          --decidables-slider-color: var(---color-z);
+        }
+
+        .v {
+          --decidables-slider-background-color: var(---color-v-light);
+          --decidables-slider-color: var(---color-v);
+        }
+
+        .t0 {
+          --decidables-slider-background-color: var(---color-t0-light);
+          --decidables-slider-color: var(---color-t0);
+        }
       `,
     ];
   }
@@ -121,16 +142,52 @@ export default class DDMParameters extends AccumulableElement {
     return html`
       <div class="holder">
         ${this.a != null
-          ? html`<decidables-slider class="a" ?disabled=${!this.interactive} min="0.01" max="2" step="0.01" .value=${+this.a.toFixed(2)} @change=${this.setBoundarySeparation.bind(this)} @input=${this.setBoundarySeparation.bind(this)}><div>Boundary Separation<br><span class="math-var">a</span></div></decidables-slider>`
+          ? html`<decidables-slider class="a"
+            ?disabled=${!this.interactive}
+            scale
+            min=${DDMMath.a.MIN}
+            max=${DDMMath.a.MAX}
+            step=${DDMMath.a.STEP}
+            .value=${+this.a.toFixed(2)}
+            @change=${this.setBoundarySeparation.bind(this)}
+            @input=${this.setBoundarySeparation.bind(this)}
+          ><div>Boundary Separation<br><span class="math-var">a</span></div></decidables-slider>`
           : html``}
         ${this.z != null
-          ? html`<decidables-slider class="z" ?disabled=${!this.interactive} min="0.01" max="0.99" step="0.01" .value=${+this.z.toFixed(2)} @change=${this.setStartingPoint.bind(this)} @input=${this.setStartingPoint.bind(this)}><div>Starting Point<br><span class="math-var">z</span></div></decidables-slider>`
+          ? html`<decidables-slider class="z"
+            ?disabled=${!this.interactive}
+            scale
+            min=${DDMMath.z.MIN}
+            max=${DDMMath.z.MAX}
+            step=${DDMMath.z.STEP}
+            .value=${+this.z.toFixed(2)}
+            @change=${this.setStartingPoint.bind(this)}
+            @input=${this.setStartingPoint.bind(this)}
+          ><div>Starting Point<br><span class="math-var">z</span></div></decidables-slider>`
           : html``}
         ${this.v != null
-          ? html`<decidables-slider class="v" ?disabled=${!this.interactive} min="0.01" max="5" step="0.01" .value=${+this.v.toFixed(2)} @change=${this.setDriftRate.bind(this)} @input=${this.setDriftRate.bind(this)}><div>Drift Rate<br><span class="math-var">v</span></div></decidables-slider>`
+          ? html`<decidables-slider class="v"
+            ?disabled=${!this.interactive}
+            scale
+            min=${DDMMath.v.MIN}
+            max=${DDMMath.v.MAX}
+            step=${DDMMath.v.STEP}
+            .value=${+this.v.toFixed(2)}
+            @change=${this.setDriftRate.bind(this)}
+            @input=${this.setDriftRate.bind(this)}
+          ><div>Drift Rate<br><span class="math-var">v</span></div></decidables-slider>`
           : html``}
         ${this.t0 != null
-          ? html`<decidables-slider class="t0" ?disabled=${!this.interactive} min="0" max="500" step="1" .value=${+this.t0.toFixed(0)} @change=${this.setNondecisionTime.bind(this)} @input=${this.setNondecisionTime.bind(this)}><div>Nondecision Time<br><span class="math-var">t₀</span></div></decidables-slider>`
+          ? html`<decidables-slider class="t0" 
+            ?disabled=${!this.interactive}
+            scale
+            min=${DDMMath.t0.MIN}
+            max=${DDMMath.t0.MAX}
+            step=${DDMMath.t0.STEP}
+            .value=${+this.t0.toFixed(0)}
+            @change=${this.setNondecisionTime.bind(this)}
+            @input=${this.setNondecisionTime.bind(this)}
+          ><div>Nondecision Time<br><span class="math-var">t₀</span></div></decidables-slider>`
           : html``}
       </div>`;
   }