Update README and example

README.md

@@ -5,3 +5,75 @@ This component renders a simple interactive slider.
 [Live demo](https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518/32f0f75e8b8fdfa212604f3a77cb022187f12cbf)
 
 Inspired by The New York Times [Is It Better to Rent or Buy?](https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html)
+
+## API Reference
+
+Regardless of orientation, sliders are always rendered at the origin. To change the position of the slider specify a [transform attribute](http://www.w3.org/TR/SVG/coords.html#TransformAttribute) on the containing element. For example:
+
+```js
+d3.select("body").append("svg")
+    .attr("width", 1440)
+    .attr("height", 30)
+  .append("g")
+    .attr("transform", "translate(0,30)")
+    .call(slider);
+```
+
+The orientation of a slider is fixed; to change the orientation, remove the old slider and create a new slider.
+
+<a name="sliderHorizontal" href="#sliderHorizontal">#</a> d3.<b>sliderHorizontal</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L256 "Source")
+
+Constructs a new horizontal slider generator.
+
+<a name="sliderVertical" href="#sliderVertical">#</a> d3.<b>sliderVertical</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L256 "Source")
+
+Constructs a new vertical slider generator. Note this function is not yet implemented.
+
+<a name="_slider" href="#_slider">#</a> <i>slider</i>(<i>context</i>) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L19 "Source")
+
+Render the slider to the given *context*, which may be either a [selection](https://github.com/d3/d3-selection) of SVG containers (either SVG or G elements) or a corresponding [transition](https://github.com/d3/d3-transition).
+
+<a name="slider_ticks" href="#slider_ticks">#</a> <i>slider</i>.<b>ticks</b>(<i>count</i>) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L218 "Source")
+
+To generate twenty ticks:
+
+```js
+slider.ticks(20);
+```
+
+<a name="slider_tickFormat" href="#slider_tickFormat">#</a> <i>slider</i>.<b>tickFormat</b>([<i>format</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#212 "Source")
+
+If *format* is specified, sets the tick format function and returns the slider. If *format* is not specified, returns the current format function, which defaults to null. A null format indicates that the slider's default formatter should be used.
+
+See [d3-format](https://github.com/d3/d3-format) and [d3-time-format](https://github.com/d3/d3-time-format) for help creating formatters. For example, to display integers with comma-grouping for thousands:
+
+```js
+slider.tickFormat(d3.format(",.0f"));
+```
+
+<a name="slider_width" href="#slider_width">#</a> <i>slider</i>.<b>width</b>([<i>size</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#212 "Source")
+
+If *size* is specified, sets the width of the slider to the specified value and returns the slider. If *size* is not specified, returns the current width, which defaults to 100.
+
+<a name="slider_min" href="#slider_min">#</a> <i>slider</i>.<b>min</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#212 "Source")
+
+If *value* is specified, sets the minimum value of the slider to the specified value and returns the slider. If *value* is not specified, returns the current minimum value, which defaults to 0.
+
+<a name="slider_max" href="#slider_max">#</a> <i>slider</i>.<b>max</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#212 "Source")
+
+If *value* is specified, sets the maximum value of the slider to the specified value and returns the slider. If *value* is not specified, returns the current maximum value, which defaults to 10.
+
+<a href="#slider_on" name="slider_on">#</a> <i>slider</i>.<b>on</b>(<i>typenames</i>, [<i>listener</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#2127 "Source")
+
+If *listener* is specified, sets the event *listener* for the specified *typenames* and returns the slider. If an event listener was already registered for the same type and name, the existing listener is removed before the new listener is added. If *listener* is null, removes the current event listeners for the specified *typenames*, if any. If *listener* is not specified, returns the first currently-assigned listener matching the specified *typenames*, if any. When a specified event is dispatched, each *listener* will be invoked with the same context and arguments as [*selection*.on](https://github.com/d3/d3-selection#selection_on) listeners: the current datum `d` and index `i`, with the `this` context as the current DOM element.
+
+The *typenames* is a string containing one or more *typename* separated by whitespace. Each *typename* is a *type*, optionally followed by a period (`.`) and a *name*, such as `drag.foo` and `drag.bar`; the name allows multiple listeners to be registered for the same *type*. The *type* must be one of the following:
+
+* `onchange` - after the slider value has changed.
+* `start` - after a new pointer becomes active (on mousedown or touchstart).
+* `drag` - after an active pointer moves (on mousemove or touchmove).
+* `end` - after an active pointer becomes inactive (on mouseup, touchend or touchcancel).
+
+Note that `onchange` and `drag` events are throttled while the slider is being actively moved.
+
+See [*dispatch*.on](https://github.com/d3/d3-dispatch#dispatch_on) for more.

example/index.html

@@ -1,19 +1,40 @@
+<!doctype html>
+<html lang="en">
+<title>d3-simple-slider</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
 <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/[email protected]/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"
+  crossorigin="anonymous">
+
 <body>
-  <p id="value">Move me</p>
-  <div id="value"></div>
-  <a id="setValue" href="#">Set value</a>
-  <a id="changeWidth" href="#">Change width</a>
+  <div class="container">
+    <h1>Basic example</h1>
+    <div class="row align-items-center">
+      <div class="col-sm-2">
+        <p id="value"></p>
+      </div>
+      <div class="col-sm">
+        <div id="value"></div>
+      </div>
+    </div>
+    <a id="setValue" href="#">Reset</a>
+    <br />
+    <a id="changeWidth" href="#">Change width</a>
+  </div>
 </body>
 
 <script>
   var data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
   var slider = d3Slider.sliderHorizontal()
-    .domain(d3.extent(data))
+    .min(d3.min(data))
+    .max(d3.max(data))
     .width(300)
     .tickFormat(d3.format('.2%'))
     .ticks(5)
@@ -30,6 +51,9 @@
 
   g.call(slider);
 
-  d3.select("a#setValue").on("click", () => slider.value(0.01));
+  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)));
-</script>
+</script>
+
+</html>

src/slider.js

@@ -4,7 +4,7 @@ import _ from 'lodash';
 function slider() {
   var value;
   var defaultValue;
-  var domain = [0, 100];
+  var domain = [0, 10];
   var width = 100;
 
   var tickFormat = null;