Enable the difference between the current value and a specified value to be highlighted

README.md

@@ -202,11 +202,31 @@ The _typenames_ is a string containing one or more _typename_ separated by white
 - `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).
+- `rangeChange` - after the range of the slider is changed
+- `rangeStart` - after mousedown on the ticks area
+- `rangeDrag` - after mousemove within the ticks area
+- `rangeEnd` - after the range adjustment is inactive (mouseup)
 
 You might consider throttling `onchange` and `drag` events. For example using [`lodash.throttle`](https://lodash.com/docs/4.17.4#throttle).
 
 See [_dispatch_.on](https://github.com/d3/d3-dispatch#dispatch_on) for more.
 
+<a href="#slider_dragToPan" name="slider_dragToPan">#</a> <i>slider</i>.<b>dragToPan</b>(<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L998 'Source')
+
+If _value_ is true, enables dragging on the ticks of the slider to change its range. 
+Dragging around the middle area for panning (moving both the minimum and the maximum).
+Dragging near the left edge allows adjusting only the minimum, and dragging around near the right edge allows adjusting only the maximum.
+The current slider knob—current value—is always kept within the range.
+By default, panning is disabled.
+
+
+<a href="#slider_showDiff" name="slider_showDiff">#</a> <i>slider</i>.<b>showDiff</b>(<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L1082 'Source')
+
+Highlights a difference between the current value and the provided _value_. 
+To remove the highlight, set _value_ to `null`.
+This feature is currently not supported for with a range slider.
+
+
 ## 🤝 How to Contribute
 
 Please read the [contribution guidelines for this project](CONTRIBUTING.md)

example/index.html

@@ -58,6 +58,16 @@ <h2>Transition</h2>
     <div class="col-sm-2"><p id="value-transition"></p></div>
     <div class="col-sm"><div id="slider-transition"></div></div>
   </div>
+  <h2>Drag to pan & zoom</h2>
+  <div class="row align-items-center">
+    <div class="col-sm-2"><p id="value-drag-to-pan"></p></div>
+    <div class="col-sm"><div id="slider-drag-to-pan"></div></div>
+  </div>
+  <h2>Show difference</h2>
+  <div class="row align-items-center">
+    <div class="col-sm-2"><p id="value-diff"></p></div>
+    <div class="col-sm"><div id="slider-diff"></div></div>
+  </div>
   <h1>Examples</h1>
   <h2>New York Times</h2>
   <div class="row align-items-center">
@@ -454,4 +464,53 @@ <h2>Color picker</h2>
   });
 
   d3.select('p#value-color-picker').text(`#${num2hex(rgb)}`);
+
+  var dragToPanSlider = d3
+    .sliderBottom()
+    .min(2)
+    .max(15)
+    .width(300)
+    .step(1)
+    .default(5)
+    .dragToPan(true)
+    .on('onchange', function (val) {
+      d3.select('p#value-drag-to-pan').text(val);
+    });
+
+  var dragToPanG = d3
+    .select('#slider-drag-to-pan')
+    .append('svg')
+    .attr('width', 500)
+    .attr('height', 100)
+    .append('g')
+    .attr('transform', 'translate(30,30)');
+
+  dragToPanG.call(dragToPanSlider);
+
+  d3.select('p#value-drag-to-pan').text(dragToPanSlider.value());
+
+  var showDiffSlider = d3
+    .sliderBottom()
+    .min(0)
+    .max(50)
+    .width(300)
+    .step(1)
+    .default(5)
+    .showDiff(10)
+    .default(25)
+    .on('onchange', function (val) {
+      d3.select('p#value-diff').text(val);
+    });
+
+  var showDiffWrapper = d3
+    .select('#slider-diff')
+    .append('svg')
+    .attr('width', 500)
+    .attr('height', 100)
+    .append('g')
+    .attr('transform', 'translate(30,30)');
+
+  showDiffWrapper.call(showDiffSlider);
+
+  d3.select('p#value-diff').text(showDiffSlider.value());
 </script>