SliderAsObjectWithCat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>

CSS

.slider_x_axis {
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.domain {
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 5px;
}

.handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  cursor: crosshair;
}

JavaScript

var Slider = function(g, scale) {

  this.margin = {
    top: 20,
    right: 10,
    bottom: 50,
    left: 10
  };
  this.slider_width = 250;
  this.slider_height = 80;

  this.scale = scale;
  this.g = g;

  if (typeof this.scale.rangePoints === "function") {
    this.scale_type = "ordinal";
    this.scale.rangePoints([0, this.slider_width]);
  } else {
    this.scale_type = "linear";
    this.scale.range([0, this.slider_width]).clamp(true);
  }

  this.brush = d3.svg.brush()
    .x(this.scale)
    .extent([0, 0]);

}

Slider.prototype.draw_slider = function() {

  var self = this;

  self.brush.on("brush", brushed);

  var slider_g = self.g.append("g")
    .attr("transform", "translate(" + self.margin.left + "," + self.margin.top + ")");

  slider_g.append("g")
    .attr("class", "slider_x_axis")
    .attr("transform", "translate(0," + self.slider_height / 2 + ")")
    .call(d3.svg.axis()
      .scale(self.scale)
      .orient("bottom")
      .tickSize(0)
      .tickPadding(12));

  self.slider = slider_g.append("g")
    .attr("class", "slider")
    .call(self.brush);

  self.slider.selectAll(".extent,.resize")
    .remove();

  self.handle = self.g.selectAll(".slider").append("circle")
    .attr("class", "handle")
    .attr("transform", "translate(0," + self.slider_height / 2 + ")")
    .attr("r", 9);

  function brushed() {
    var value = self.brush.extent()[0];

    if (d3.event.sourceEvent) { // not a programmatic event
      if (self.scale_type === "linear") {
        value = self.scale.invert(d3.mouse(this)[0]);
      } else {
        
        //Invert the ordinal scale
        var range = self.scale.range();
        var width = range[1];
        console.log(width);
        for (i = 0; i < self.scale.domain().length; i++) {
          if (d3.mouse(this)[0] > (range[i] - width / 2) & d3.mouse(this)[0] < (range[i] + width / 2)) {
            var index = i
          }
        }
        value = self.scale.domain()[index];
      };
      console.log(value);
  ...