title: D3 brush - disable resize behavior in d3 v5
body: <p>I'm trying to build a slider element (much like input range element in HTML5), using d3.js brushes.</p>
  
  <p>Following up from <a href="https://stackoverflow.com/questions/23808436/disable-d3-brush-resize">Disable d3 brush resize</a> post, i tried a few things however none of them are able to disable the resize behavior. </p>
  
  <p>Here's my progress so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var width = 640,
              height = 480,
              margin = {
                  right: 30,
                  left: 30
              }
  
          var svg = d3.select('body')
              .append('svg')
              .attr('width', width)
              .attr('height', height)
  
          var xScale = d3.scaleLinear()
              .domain([0, 180])
              .range([0, width])
              .clamp(true) //May not be required in version 5
  
          svg.append('g')
              .attr('class', 'x axis')
              .attr('transform', 'translate(50,100)')
              .call(d3.axisBottom()
                  .scale(xScale)
                  .tickSize(0)
                  .tickFormat("")
              )
  
          var brush = d3.brushX()
              .extent([
                  [0, 0],
                  [width, 20]
              ])
              .on('brush', brushed)
  
          var brushg = svg.append('g')
              .attr('class', 'brush')
              .call(brush)
              .attr('transform', 'translate(50,100)')
  
          brushg.selectAll(".resize").remove();
  
          function brushed() {
          }
  
  
          brush.move(brushg, [0, 20].map(xScale));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.brush .extent {
              fill-opacity: .125;
              shape-rendering: crispEdges;
          }
          
          g.brush&gt;.resize {
              display: none;
          }
          
          .handle {
              pointer-events: none;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, does the below snippet (mentioned in many posts and examples) no longer work?</p>
  
  <pre><code>brush.selectAll(".resize").remove(); 
  </code></pre>
  
  <p>Is this a version specific issue? 
  How can I disable the brush resize without over-complicating the source code in version 5 of d3?</p>