d3-simple-slider

Renders a simple interactive slider.

Inspired by The New York Times Is It Better to Rent or Buy?

<!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">

<body>
  <div class="container">
    <h1>Basic example</h1>
    <div class="row align-items-center">
      <div class="col-sm-2">
        <p id="value1"></p>
      </div>
      <div class="col-sm">
        <div id="slider1"></div>
      </div>
    </div>
    <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>
    <h1>Dense values example</h1>
    <div class="row align-items-center">
      <div class="col-sm-2">
        <p id="value4"></p>
      </div>
      <div class="col-sm">
        <div id="slider4"></div>
      </div>
    </div>
    <a id="setValue4" href="#">Reset</a>
  </div>
</body>

var slider1 = d3.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#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 = d3.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 = d3.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#slider3").append("svg")
    .attr("width", 500)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(30,30)");

g.call(slider3);

d3.select("p#value3").text(d3.timeFormat('%Y')(slider3.value()));
  d3.select("a#setValue3").on("click", () => slider3.value(new Date(1997, 11, 17)));

var data4 = [0.20, 0.22, 0.24, 0.26, 0.28, 0.30, 1];

var slider4 = d3.sliderHorizontal()
    .min(d3.min(data4))
    .max(d3.max(data4))
    .width(300)
    .tickFormat(d3.format('.2%'))
    .marks(data4)
    .ticks(5)
    .default(0.015)
    .on('onchange', val => {
      d3.select("p#value4").text(d3.format('.2%')(val));
    });

var g = d3.select("div#slider4").append("svg")
    .attr("width", 500)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(30,30)");

g.call(slider4);

d3.select("p#value4").text(d3.format('.2%')(slider4.value()))
  d3.select("a#setValue4").on("click", () => slider4.value(0.015));
</script>

</html>

https://d3js.org/d3.v4.min.js

https://unpkg.com/d3-simple-slider@0.2.0/build/d3-simple-slider.js