Brush Slider 2

Brush Slider 2 is taken from Brush Slider 1. I changed some colors and the extent to look more like some of Mike Bostock’s examples. I also added to text to show the position of the extent handles.

<!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;
        stroke: #fff;
        fill-opacity: .5;
        shape-rendering: crispEdges;
      }
      /* 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>
      // default position of the handles
      var handle1 = 25,
        handle2 = 75;

// create the svg container
      var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 200);

// appent the text container to the svg container
      var text1 = svg.append("text")
        .attr("x", 25)
        .attr("y", 25)
        .style("font-size", "16px")
        .text("text1");

// appent the text container to the svg container
      var text2 = svg.append("text")
        .attr("x", 75)
        .attr("y", 25)
        .style("font-size", "16px")
        .text("text2");

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

// Create the brush
      // this is how long our slider will be
      var brush = d3.svg.brush()
        .x(xscale)
        .extent([handle1, handle2]) // set the default extent
        // Note that this does not automatically redraw the brush or dispatch any events to listeners.
        // To redraw the brush, call brush on a selection or transition; to dispatch events, use brush.event.
        .on("brush", brushed); // call the brushed function

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

brush(slider);

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

update(handle1, handle2);

function update(value1, value2) {
        // update the svg text
        //svg.select("text").text(Math.round(value));
        text1.text(Math.round(value1));
        text2.text(Math.round(value2));
      }

function brushed() {
        var value1 = brush.extent()[0];
        var value2 = brush.extent()[1];
        update(value1, value2);
      }
    </script>
  </body>

</html>

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