Top, right, bottom and left variants

README.md

@@ -59,11 +59,27 @@ The orientation of a slider is fixed; to change the orientation, remove the old
 
 <a name="sliderHorizontal" href="#sliderHorizontal">#</a> d3.<b>sliderHorizontal</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L442 'Source')
 
-Constructs a new horizontal slider generator.
+Constructs a new horizontal slider generator. _Note that this is equivalent to [`sliderBottom`](#sliderBottom)._
 
 <a name="sliderVertical" href="#sliderVertical">#</a> d3.<b>sliderVertical</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L447 'Source')
 
-Constructs a new vertical slider generator.
+Constructs a new vertical slider generator. _Note that this is equivalent to [`sliderLeft`](#sliderLeft)._
+
+<a name="sliderTop" href="#sliderTop">#</a> d3.<b>sliderTop</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L442 'Source')
+
+Constructs a new horizontal slider generator. Ticks on top.
+
+<a name="sliderRight" href="#sliderRight">#</a> d3.<b>sliderRight</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L447 'Source')
+
+Constructs a new vertical slider generator. Ticks to the right;
+
+<a name="sliderBottom" href="#sliderBottom">#</a> d3.<b>sliderBottom</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L442 'Source')
+
+Constructs a new horizontal slider generator. Ticks on the bottom.
+
+<a name="sliderLeft" href="#sliderLeft">#</a> d3.<b>sliderLeft</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L447 'Source')
+
+Constructs a new vertical slider generator. Ticks to the left;
 
 <a name="_slider" href="#_slider">#</a> <i>slider</i>(<i>context</i>) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L38 'Source')
 

example/index.html

@@ -71,6 +71,26 @@ <h1>Vertical example</h1>
       </div>
     </div>
     <a id="setValue6" href="#">Reset</a>
+    <h1>Top example</h1>
+    <div class="row align-items-center">
+      <div class="col-sm-2">
+        <p id="value7"></p>
+      </div>
+      <div class="col-sm">
+        <div id="slider7"></div>
+      </div>
+    </div>
+    <a id="setValue7" href="#">Reset</a>
+    <h1>Right example</h1>
+    <div class="row align-items-center">
+      <div class="col-sm-2">
+        <p id="value8"></p>
+      </div>
+      <div class="col-sm">
+        <div id="slider8"></div>
+      </div>
+    </div>
+    <a id="setValue8" href="#">Reset</a>
   </div>
 </body>
 
@@ -213,6 +233,46 @@ <h1>Vertical example</h1>
 
   d3.select("p#value6").text((slider6.value()));
   d3.select("a#setValue6").on("click", () => { slider6.value(5); d3.event.preventDefault(); });
+
+  var slider7 = d3.sliderTop()
+    .min(0)
+    .max(10)
+    .step(1)
+    .height(300)
+    .on('onchange', val => {
+      d3.select("p#value7").text(val);
+    });
+
+  var group7 = d3.select("div#slider7").append("svg")
+    .attr("width", 300)
+    .attr("height", 100)
+    .append("g")
+    .attr("transform", "translate(30,60)");
+
+  group7.call(slider7);
+
+  d3.select("p#value7").text((slider7.value()));
+  d3.select("a#setValue7").on("click", () => { slider7.value(5); d3.event.preventDefault(); });
+
+  var slider8 = d3.sliderRight()
+    .min(0)
+    .max(10)
+    .step(1)
+    .height(300)
+    .on('onchange', val => {
+      d3.select("p#value8").text(val);
+    });
+
+  var group8 = d3.select("div#slider8").append("svg")
+    .attr("width", 100)
+    .attr("height", 360)
+    .append("g")
+    .attr("transform", "translate(60,30)");
+
+  group8.call(slider8);
+
+  d3.select("p#value8").text((slider8.value()));
+  d3.select("a#setValue8").on("click", () => { slider8.value(5); d3.event.preventDefault(); });
 </script>
 
 </html>

index.js

@@ -1 +1,8 @@
-export { sliderHorizontal, sliderVertical } from './src/slider.js';
+export {
+  sliderHorizontal,
+  sliderVertical,
+  sliderTop,
+  sliderRight,
+  sliderBottom,
+  sliderLeft,
+} from './src/slider.js';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d3-simple-slider",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Renders an SVG slider",
   "keywords": [
     "d3",