2.2.1

examples/article.html

@@ -58,7 +58,6 @@
   </d-math>
   <a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
   <h3>Citations</h3>
-  <p><d-slider style="width: 200px;"></d-slider></p>
   <p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite>. We should also be testing footnotes<d-footnote>This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}</d-math>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
   <a class="marker" href="#section-2" id="section-2"><span>2</span></a>
   <h2>Displaying code snippets</h2>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.3",
+  "version": "2.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.3",
+  "version": "2.2.1",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {

src/ui/d-slider.js

@@ -2,7 +2,8 @@ import { Template } from '../mixins/template';
 import { scaleLinear } from 'd3-scale';
 import { range } from 'd3-array';
 import { drag } from 'd3-drag';
-import { select, event as currentEvent } from 'd3-selection';
+import { select } from 'd3-selection';
+import  {event as currentEvent } from 'd3-selection';
 
 const T = Template('d-slider', `
 <style>
@@ -147,7 +148,7 @@ export class Slider extends T(HTMLElement) {
     this.renderTicks();
 
     this.drag = drag()
-      .container(this.background)
+      .container(this.track)
       .on("start", () => {
         this.mouseEvent = true;
         this.background.classList.add("mousedown");
@@ -258,7 +259,8 @@ export class Slider extends T(HTMLElement) {
 
   dragUpdate() {
     const bbox = this.background.getBoundingClientRect();
-    const x = currentEvent.x;
+    const left = bbox.left;
+    const x = event.x - left;
     const width = bbox.width;
     this.update(this.scale.invert(x / width));
   }