scratch slide

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin: 10px;
      padding: 0px;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;  
    }
    .sliderContainer {
      margin: 50px;
/*       fill: cornflowerblue; */
    }
    
    rect {
     stroke: red;
     stroke-width: 4px;
     fill: cornflowerblue; 
     opacity: 0.3;
    }
    
    .sliderContainer line {
      stroke: red;
  		stroke-width: 1.5px;
      fill: #bcfcb5;
    }
    .handle {
  		fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 2.2px;
		}
    
    .track {
 		 	stroke: #000;
  		stroke-opacity: 0.3;
 			stroke-width: 5px;
		}
    
    .track-overlay {
 		 	pointer-events: stroke;
  		stroke-width: 50px;
  		cursor: crosshair;
		}
    
  </style>
</head>

<body>
  <script>
    let margin = {top: 15, right: 20, bottom: 38, left: 20},
        height =  500,
				width = 960,
    		slideWidth = width - margin.left - margin.right,
    		slideHeight = -height - margin.top - margin.bottom + 10;

let svg = d3.select('body').append('svg')
    		.attr('height', height)
   			.attr('width', width)  
   
    let driverActual = 0,
    driverTarget = 211,
    driverAlpha = 0.2,
    driverTimer = d3.timer(driverTween);
    
    
   	let sliderContainer = svg.append('g')
    	.attr('class', 'sliderContainer')
    	
 
   
   sliderContainer.append("text")
      .text("g.sliderPanel")
      .attr("y", 40)
      .attr("x", 20)
      .attr("font-size", 16)
      .attr("font-family", "monospace")

slider.insert("g", ".track-overlay")
    	.attr("class", "ticks")
    	.attr("transform", "translate(0," + 30 + ")")
  	.selectAll("text")
  	.data(xScale.ticks(4))
  	.enter().append("text")
    	.attr("x", xScale)
    	.attr("text-anchor", "middle")
    	.text(function(d) { return "$" + d + "k"; });  
    
   
 let brush = d3.brushX()
			.extent([[0,0], [width,height]])
			.on("brush", brushed);

let brushg = svg.append("g")
  		.attr("class", "brush")
			.attr("transform", "translate(" + margin.left + "," + (height - 0) / 2 + ")")
  		.call(brush)  
    
 
 function brushed() {
   	let range = d3.brushSelection().map(xScale.invert)

d3.selectAll("span")
      .text(function(d, i) {
      return Math.round(range[i]) 
    })
  }
  
  
  let handle = slider.insert("circle", ".track-overlay")
   		.attr("class", "handle")
   		.attr("r", 10);          
    
  function driver(h) {
      driverTarget = h;
      hueTimer.restart(hueTween);
  }    
       
  function driverTween() {
      var driverError = driverTarget - driverActual;
   
    if (Math.abs(driverError) < 1e-3) driverActual = driverTarget, driverTimer.stop();
      else driverActual += driverError * driverAlpha;
      handle.attr("cx", xScale(driverActual));
      svg.style("background-color", "lightgrey");
    }

brushed();
 		brush.move(brushg, [10, 30].map(xScale));
   
       
 	  sliderContainer.append('rect')
    		.attr('width', 500)
    		.attr('height', 100)
    
    
    
    
    
    
    
    
    
    
    
    
//     var x1 = d3.scaleLinear()
//           .domain([0, dataDomain[1]])
//           .range([0, dataRange])

//     var x0 = this.__slider__ || d3.scaleLinear()
//           .domain([dataDomain[0], dataDomain[1]])
//           .range(x1.range())          
              
//     this.__slider__ = x1;

//     sliderContainer.enter().append("line")
//       .attr("class", function(d, i) { return "slideLine s" + i; })
// // 			.attr('class', 'slideLine')
//       .attr("x1", x0)
//       .attr("x2", x0)
//       .attr("y1", 0)
//       .attr("y2", 0)

</script>
</body>

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