Support time scales and tickValues

example/index.html

@@ -6,7 +6,7 @@
 
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
-<!--<script src="https://unpkg.com/d3-simple-slider@0.1.2/build/d3-simple-slider.js"></script>-->
+<!--<script src="https://unpkg.com/d3-simple-slider1@0.1.2/build/d3-simple-slider.js"></script>-->
 <script src="../build/d3-simple-slider.js"></script>
 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
@@ -17,43 +17,104 @@
     <h1>Basic example</h1>
     <div class="row align-items-center">
       <div class="col-sm-2">
-        <p id="value"></p>
+        <p id="value1"></p>
       </div>
       <div class="col-sm">
-        <div id="value"></div>
+        <div id="slider1"></div>
       </div>
     </div>
-    <a id="setValue" href="#">Reset</a>
-    <br />
-    <a id="changeWidth" href="#">Change width</a>
+    <a id="setValue1" href="#">Reset</a>
+    <h1>Step example</h1>
+    <div class="row align-items-center">
+      <div class="col-sm-2">
+        <p id="value2"></p>
+      </div>
+      <div class="col-sm">
+        <div id="slider2"></div>
+      </div>
+    </div>
+    <a id="setValue2" href="#">Reset</a>
+    <h1>Time example</h1>
+    <div class="row align-items-center">
+      <div class="col-sm-2">
+        <p id="value3"></p>
+      </div>
+      <div class="col-sm">
+        <div id="slider3"></div>
+      </div>
+    </div>
+    <a id="setValue3" href="#">Reset</a>
   </div>
 </body>
 
 <script>
-  var data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
+  var data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
-  var slider = d3Slider.sliderHorizontal()
-    .min(d3.min(data))
-    .max(d3.max(data))
+  var slider1 = d3Slider.sliderHorizontal()
+    .min(d3.min(data1))
+    .max(d3.max(data1))
     .width(300)
     .tickFormat(d3.format('.2%'))
     .ticks(5)
     .default(0.015)
     .on('onchange', val => {
-      d3.select("p#value").text(d3.format('.2%')(val));
+      d3.select("p#value1").text(d3.format('.2%')(val));
+    });
+
+  var g = d3.select("div#slider1").append("svg")
+    .attr("width", 500)
+    .attr("height", 100)
+    .append("g")
+    .attr("transform", "translate(30,30)");
+
+  g.call(slider1);
+
+  d3.select("p#value1").text(d3.format('.2%')(slider1.value()))
+  d3.select("a#setValue1").on("click", () => slider1.value(0.015));
+
+  var slider2 = d3Slider.sliderHorizontal()
+    .min(0)
+    .max(10)
+    .step(1)
+    .width(300)
+    .on('onchange', val => {
+      d3.select("p#value2").text(val);
+    });
+
+  var g = d3.select("div#slider2").append("svg")
+    .attr("width", 500)
+    .attr("height", 100)
+    .append("g")
+    .attr("transform", "translate(30,30)");
+
+  g.call(slider2);
+
+  d3.select("p#value2").text((slider2.value()));
+  d3.select("a#setValue2").on("click", () => slider2.value(5));
+
+  var data3 = d3.range(0, 10).map(function (d) { return new Date(1995 + d, 10, 3); });
+
+  var slider3 = d3Slider.sliderHorizontal()
+    .min(d3.min(data3))
+    .max(d3.max(data3))
+    .step(1000 * 60 * 60 * 24 * 365)
+    .width(400)
+    .tickFormat(d3.timeFormat('%Y'))
+    .tickValues(data3)
+    .on('onchange', val => {
+      d3.select("p#value3").text(d3.timeFormat('%Y')(val));
     });
 
-  var g = d3.select("div#value").append("svg")
+  var g = d3.select("div#slider3").append("svg")
     .attr("width", 500)
     .attr("height", 100)
     .append("g")
     .attr("transform", "translate(30,30)");
 
-  g.call(slider);
+  g.call(slider3);
 
-  d3.select("p#value").text(d3.format('.2%')(slider.value()))
-  d3.select("a#setValue").on("click", () => slider.value(0.015));
-  d3.select("a#changeWidth").on("click", () => g.call(slider.width(Math.floor(Math.random() * 500) + 200)));
+  d3.select("p#value3").text(d3.timeFormat('%Y')(slider3.value()));
+  d3.select("a#setValue3").on("click", () => slider3.value(new Date(1997, 11, 17)));
 </script>
 
 </html>

index.js

@@ -1,3 +1 @@
-export {
-  sliderHorizontal
-} from "./src/slider.js";
+export { sliderHorizontal } from "./src/slider.js";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d3-simple-slider",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Displays an SVG slider",
   "keywords": [
     "d3",