title: How to get the selected values from d3.js range slider?
body: <p>Hi i managed to get a range slider from internet and i just modified it. Now i want to know how to get the value from the range slider . My JSFIDDLE is <a href="http://jsfiddle.net/gdHB4/" rel="nofollow">http://jsfiddle.net/gdHB4/</a>. If i selected the value from o.3 to 0.8 ,then i want to get the value 0.3 and 0.8 in two different variables. I also want to convert the x-axis of the slider to years(do only if possible for u, otherwise i will try). Thanks </p>
  
  <pre><code>var brush = d3.svg.brush()
      .x(x)
      .extent([.3, .9])
     .on("brushstart", brushstart)
      .on("brush", brushmove)
      .on("brushend", brushend);
  
  var arc = d3.svg.arc()
      .outerRadius(height / 2)
      .startAngle(0)
      .endAngle(function(d, i) { return i ? -Math.PI : Math.PI; });
  
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis().scale(x).orient("top").tickSize(0));
  
  /*var circle = svg.append("g").selectAll("text")
      .data(data)
      .enter().append("text").text("working");
      */
  
  
  var brushg = svg.append("g")
      .attr("class", "brush")
      .call(brush);
  
  brushg.selectAll(".resize").append("path")
      .attr("transform", "translate(0," +  height / 2 + ")")
      .attr("d", arc);
  
  brushg.selectAll("rect")
      .attr("height", height);
  
  brushstart();
  brushmove();
  
  function brushstart() {
    svg.classed("selecting", true);
  }
  
  function brushmove() {
    var s = brush.extent();
    circle.classed("selected", function(d) { return s[0] &lt;= d &amp;&amp; d &lt;= s[1]; });
  }
  
  function brushend() {
    svg.classed("selecting", !d3.event.target.empty());
  }
  </code></pre>