<script src="https://unpkg.com/d3-simple-slider"></script>

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  crossorigin="anonymous"
/>
<div class="container">
  
  <h2>Date(month)</h2>
  <div class="row align-items-center">
    <div class="col-sm-2"><p id="value-time"></p></div>
    <div class="col-sm"><div id="slider-time"></div></div>
  </div>
  
<script>
  

  // Time
  var dataTime = d3.range(0, 12).map(function(d) {
    return new Date(2020, d, 1);
  });
	var val=1;
  var sliderTime = d3
    .sliderBottom()
    .min(d3.min(dataTime))
    .max(d3.max(dataTime))
    .step(12)
    .width(600)
    .tickFormat(d3.timeFormat('%m'))
    .tickValues(dataTime)
    .default(new Date(2020,1,1))
    .on('onchange', val => {
      d3.select('p#value-time').text(d3.timeFormat('%Y/%m')(val));
    });
  
  var gTime = d3
    .select('div#slider-time')
    .append('svg')
    .attr('width', 700)
    .attr('height', 100)
    .append('g')
    .attr('transform', 'translate(30,30)');

  gTime.call(sliderTime);

  d3.select('p#value-time').text(d3.timeFormat('%Y/%m')(sliderTime.value()));

  var sli = d3.on('onchange', val => {
    d3.select('p#value-time').text(d3.timeFormat('%Y/%m')(val));
});
  console.log(sli.value());
  
</script>


//var tmp = 1;
    	//var slider = d3.select('#month').on('change', function() {
    //console.log(this.value);
        //tmp = this.value();
     //console.log(tmp); 
      //src="index.js"