RiserSlider

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 300)
      .attr("height", 1080)

var scale = d3.scale.linear()
    .domain([0,5000])
    .range([10,600])
    
    var brush = d3.svg.brush()
    brush.x(scale)
    brush.extent([2000,3500])
    
    brush.on("brushend", function(){
      console.log(brush.extent())
    })
    
    var g = svg.append("g")
    brush(g)
    g.attr("transform", "translate(200,800)rotate(-90)")
    g.selectAll("rect").attr("height", 50)
    g.selectAll(".background")
    .style({fill: "#68304d", visibility: "visible"})
    g.selectAll(".extent")
    .style({fill: "#78c5c5", visibility: "visible"})
    g.selectAll(".resize rect")
    .style({fill: "#276c86", visibility: "visible"})

</script>
</body>

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