JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>

  <div class="range">
     selected range : []
  </div>
    <div class="data">
      selected data length - 0
  </div>

<div class="chart-container" style="margin-top:50px;border-radius:5px;padding-top:30px;padding=left:20px;background-color:#30363E;"> </div>

JavaScript

d3.json('https://gist.githubusercontent.com/bumbeishvili/a0ab3299b4e4eb1557085317b9136ec1/raw/ba488da953d2fa0e64ff2469a209c520fd408055/dateData.json')
.then(data=>{


 new RangeSlider()
  .container('.chart-container')
  .svgWidth(window.innerWidth-20)
  .svgHeight(100)
  .data(data)
  .accessor(d=>new Date(d))
  .onBrush(d=>{
     d3.select('.range').html(`range is [` + d.range[0].toLocaleDateString('en')+', '+ d.range[1].toLocaleDateString('en')+`]`)
     d3.select('.data').html(`selected data length - `+d.data.length)
  })
  .render()


})