Brush Slider 1

Simple brush slider (from https://www.youtube.com/watch?v=KhONK158L_A).

<!DOCTYPE html>
<html>
  <head>
    
    <meta charset='utf-8'>
    <title>D3.js Brush Example</title>
    <style>
      /* set the background of the brush to visible */
      .background {
        visibility: visible !important;
        fill: darkblue;
      }
      /* set the extent to visible and give it a color */
      .extent {
        visibility: visible !important;
        fill: blue;
      }
      /* set the handles to visible and give them a color */
      .resize rect {
        visibility: visible !important;
        fill: red;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      var svg = d3.select("body").append("svg")
          .attr("width", 500)
          .attr("height", 200);

var svg = d3.select("svg");

// set up the x scale
      var xscale = d3.scale.linear()
          .domain([0,1])
          .range([0,300]);

// this is how long our slider will be
      var brush = d3.svg.brush()
          .x(xscale);

// set x to the xscale
      var slider = svg.append("g")
          .attr("transform", "translate(" + [100, 100] + ")");

// set the default extent
      brush.extent([0.4,0.6]);

brush(slider);

// set the height of the slider
      slider.selectAll("rect")
          .attr("height", 30);

</script>
  </body>
</html>

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