diff --git a/README.md b/README.md
index 9e0c675..d2f0b29 100644
--- a/README.md
+++ b/README.md
@@ -7,12 +7,19 @@ Render a simple interactive slider using SVG.
-[Examples](https://d3-simple-slider.netlify.com)
+Examples:
-[Bl.ocks.org examples](https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518)
+- [Storybook](https://d3-simple-slider.netlify.com)
+- [Bl.ocks.org](https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518)
Inspired by The New York Times [Is It Better to Rent or Buy?](https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html)
+## Motivation
+
+Include an interactive slider in an svg element. For example, use a slider in place of an axis in a chart.
+
+Can also be used by itself as a generic slider. However, there are many existing html-based components which may be better suited to your needs. Of course you might just love using d3!
+
## Installing
If you use NPM, `npm install d3-simple-slider`. Otherwise, download the [latest release](https://github.com/johnwalley/d3-simple-slider/releases/latest). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:
@@ -64,35 +71,35 @@ The orientation of a slider is fixed; to change the orientation, remove the old
All sliders may take a [scale](https://github.com/d3/d3-scale) as an argument. If _scale_ is specified, the slider will use the scale to render the slider. This must be either [scaleLinear](https://github.com/d3/d3-scale#scaleLinear) or [scaleTime](https://github.com/d3/d3-scale#scaleTime). The domain will be used to calculate minimum and maximum values. The range will be used to calculate the width or height of the slider. This means you do not need to set these if passing a scale.
-# d3.sliderHorizontal ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L442 'Source')
+# d3.sliderHorizontal ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L639 'Source')
Constructs a new horizontal slider generator. _Note that this is equivalent to [`sliderBottom`](#sliderBottom)._
-# d3.sliderVertical ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L447 'Source')
+# d3.sliderVertical ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L643 'Source')
Constructs a new vertical slider generator. _Note that this is equivalent to [`sliderLeft`](#sliderLeft)._
-# d3.sliderTop ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L442 'Source')
+# d3.sliderTop ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L647 'Source')
Constructs a new horizontal slider generator. Ticks on top.
-# d3.sliderRight ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L447 'Source')
+# d3.sliderRight ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L651 'Source')
Constructs a new vertical slider generator. Ticks to the right;
-# d3.sliderBottom ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L442 'Source')
+# d3.sliderBottom ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L655 'Source')
Constructs a new horizontal slider generator. Ticks on the bottom.
-# d3.sliderLeft ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L447 'Source')
+# d3.sliderLeft ([scale ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L659 'Source')
Constructs a new vertical slider generator. Ticks to the left;
-# slider (context ) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L38 'Source')
+# slider (context ) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L93 '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).
-# slider .ticks (count ) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L370 'Source')
+# slider .ticks (count ) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L519 'Source')
To generate twenty ticks:
@@ -100,7 +107,7 @@ To generate twenty ticks:
slider.ticks(20);
```
-# slider .tickFormat ([format ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L358 'Source')
+# slider .tickFormat ([format ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L522 '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.
@@ -110,7 +117,7 @@ See [d3-format](https://github.com/d3/d3-format) and [d3-time-format](https://gi
slider.tickFormat(d3.format(',.0f'));
```
-# slider .displayFormat ([format ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L364 'Source')
+# slider .displayFormat ([format ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L528 'Source')
If _format_ is specified, sets the function used to format the highlighted value and returns the slider. If _format_ is not specified, returns the current format function, which defaults to null. A null format indicates that the tickFormat should be used. If tickFormat is null then the slider's default formatter should be used.
@@ -120,39 +127,63 @@ See [d3-format](https://github.com/d3/d3-format) and [d3-time-format](https://gi
slider.displayFormat(d3.format(',.0f'));
```
-# slider .value ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L376 'Source')
+# slider .value ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L541 'Source')
If _value_ is specified, sets the value of the slider to the specified value and returns the slider. If _value_ is not specified, returns the current value.
-# slider .silentValue ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L387 'Source')
+If _value_ is an array of length two then the values represent a range.
+
+# slider .silentValue ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L560 'Source')
If _value_ is specified, sets the value of the slider to the specified value and returns the slider _without_ invoking any listeners. If _value_ is not specified, returns the current value.
-# slider .displayValue ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L429 'Source')
+If _value_ is an array of length two then the values represent a range.
+
+# slider .displayValue ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L619 'Source')
If _value_ is specified, sets the whether the highlighted value of the slider should be shown and returns the slider. If _value_ is not specified, returns the current value, which defaults to true.
-# slider .handle ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L423 'Source')
+# slider .handle ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L613 'Source')
If _value_ is specified, sets the [SVG path definition](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) used to render the slider handle and returns the slider. If _value_ is not specified, returns the current value, which defaults to 'M-5.5,-5.5v10l6,5.5l6,-5.5v-10z'.
-# slider .width ([size ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L346 'Source')
+# slider .width ([size ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L510 '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. This property only affects horizontal sliders and is ignored otherwise.
-# slider .height ([size ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L352 'Source')
+# slider .height ([size ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L516 'Source')
If _size_ is specified, sets the height of the slider to the specified value and returns the slider. If _size_ is not specified, returns the current height, which defaults to 100. This property only affects vertical sliders and is ignored otherwise.
-# slider .min ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L328 'Source')
+# slider .min ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L492 '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.
-# slider .max ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L334 'Source')
+# slider .max ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L498 '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.
-# slider .on (typenames , [listener ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L435 'Source')
+# slider .domain ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L504 'Source')
+
+If _value_ is specified, an array which sets the minimum and maximum values of the slider and returns the slider. If _value_ is not specified, returns the current maximum value, which defaults to [0, 10].
+
+# slider .fill ([color ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L625 'Source')
+
+If _color_ is specified, sets the color of the slider track-fill and returns the slider. If _color_ is not specified, returns the current value, which defaults to null.
+
+# slider .step ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L595 'Source')
+
+If _value_ is specified, sets the increment which the slider will move in and returns the slider. If _value_ is not specified, returns the current value, which defaults to null.
+
+# slider .marks ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L607 'Source')
+
+If _value_ is specified, sets the values to which the slider will snap to and returns the slider. If _value_ is not specified, returns the current value, which defaults to null.
+
+# slider .default ([value ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L579 'Source')
+
+If _value_ is specified, sets the initial value of the slider and returns the slider. If _value_ is not specified, returns the current value, which defaults to null.
+
+# slider .on (typenames , [listener ]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L631 '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.
diff --git a/example/index.html b/example/index.html
index 2a761c8..ca774a6 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,306 +1,455 @@
-
-
- d3-simple-slider
-
-
Basic example
-
-
Reset
-
Step example
-
-
Reset
-
Time example
-
-
Reset
-
Dense values example
-
-
Reset
-
Transition example
-
-
Reset
-
Vertical example
-
-
Reset
-
Top example
-
-
Reset
-
Right example
-
-
Reset
-
+
Basic functionality
+
Simple
+
+
Step
+
+
Time
+
+
Fill
+
+
Range
+
+
Vertical
+
+
Extended functionality
+
Alternative handle
+
+
Transition
+
+
Examples
+
New York Times
+
+
Color picker
+
+