Step ticks

examples/article.html

@@ -42,6 +42,10 @@
 <distill-header></distill-header>
 <d-abstract>
   <figure style="grid-column: page; margin: 1rem 0;"><img src="momentum.png" style="width:100%; border: 1px solid rgba(0, 0, 0, 0.2);"/></figure>
+  <div style="grid-column: page;">
+    <d-slider style="grid-column: page;" step="1" min="1" max="6"></d-slider>
+    <input type="range" />
+  </div>
   <d-slider style="grid-column: page;" step="1" min="1" max="6"></d-slider>
   <d-slider style="width: 100px;"></d-slider>
   <input type="range" />

package-lock.json

@@ -1124,8 +1124,7 @@
     "commander": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
-      "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
-      "dev": true
+      "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
     },
     "concat-map": {
       "version": "0.0.1",
@@ -3563,7 +3562,6 @@
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.2.0.tgz",
       "integrity": "sha512-+5wd6vJuh/Evw3wkmCuKXKibDd5RS7PYZjKaP4s2Hj5W7tvmbuFuaDN4erbH07VznTBFcK+lcsrGVnP6EugXow==",
-      "dev": true,
       "requires": {
         "abab": "1.0.3",
         "acorn": "4.0.13",
@@ -3592,7 +3590,6 @@
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.1.0.tgz",
           "integrity": "sha1-X8gnm5PXVIO5ztiyYjmFSEehhXg=",
-          "dev": true,
           "requires": {
             "lodash.sortby": "4.7.0",
             "tr46": "0.0.3",
@@ -3869,8 +3866,7 @@
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
-      "dev": true
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
     "longest": {
       "version": "1.0.1",

package.json

@@ -49,12 +49,13 @@
   "dependencies": {
     "@webcomponents/webcomponentsjs": "^1.0.7",
     "assert": "^1.4.1",
+    "commander": "^2.9.0",
+    "d3-array": "^1.2.1",
     "d3-drag": "^1.2.1",
     "d3-scale": "^1.0.6",
     "d3-selection": "^1.1.0",
     "d3-time-format": "^2.0.3",
     "intersection-observer": "^0.4.0",
-    "commander": "^2.9.0",
     "jsdom": "^11.2.0",
     "jsdom-wc": "^11.0.0-alpha-1",
     "katex": "^0.7.1"

src/ui/d-slider.js

@@ -1,5 +1,6 @@
 import { Template } from '../mixins/template';
 import { scaleLinear } from 'd3-scale';
+import { range } from 'd3-array';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
 import  {event as currentEvent } from 'd3-selection';
@@ -8,6 +9,7 @@ const T = Template('d-slider', `
 <style>
   :host {
     position: relative;
+    display: block;
   }
 
   :host(:focus) {
@@ -157,7 +159,7 @@ export class Slider extends T(HTMLElement) {
         this.background.classList.remove("mousedown");
       });
     this.drag(select(this.background));
-    this.renderTicks(5);
+    this.renderTicks();
     this.addEventListener("focusin", (e) => {
       if(!this.mouseEvent) {
         this.background.classList.add("focus");
@@ -247,9 +249,14 @@ export class Slider extends T(HTMLElement) {
     this.dispatchEvent(e, {});
   }
 
-  renderTicks(numTicks) {
+  renderTicks() {
     const ticksContainer = this.root.querySelector(".ticks");
-    const tickData = this.scale.ticks(numTicks);
+    let tickData = [];
+    if (this.step === "any") {
+      tickData = this.scale.ticks();
+    } else {
+      tickData = range(this.min, this.max + 1e-6, this.step);
+    }
     tickData.forEach(d => {
       const tick = document.createElement("div");
       tick.classList.add("tick");