Slider = function(x, y, width, svgParent, opt_changeFunc) {
  this.KNOB_Y_ = y - 12;
  this.KNOB_MIN_X_ = x + 8;
  this.KNOB_MAX_X_ = x + width - 8;
  this.TARGET_OVERHANG_ = 20;
  this.value_ = 0.5;
  this.changeFunc_ = opt_changeFunc;
  this.animationTasks_ = [];

  // Draw the slider.
  /*
  <line class="sliderTrack" x1="10" y1="35" x2="140" y2="35" />
  <rect style="opacity: 0" x="5" y="25" width="150" height="20" />
  <path id="knob"
      transform="translate(67, 23)"
      d="m 8,0 l -8,8 v 12 h 16 v -12 z" />
  <circle style="opacity: 0" r="20" cy="35" cx="75"></circle>
  */
  var track = document.createElementNS(Slider.SVG_NS_, 'line');
  track.setAttribute('class', 'sliderTrack');
  track.setAttribute('x1', x);
  track.setAttribute('y1', y);
  track.setAttribute('x2', x + width);
  track.setAttribute('y2', y);
  svgParent.appendChild(track);
  this.track_ = track;
  var rect = document.createElementNS(Slider.SVG_NS_, 'rect');
  rect.setAttribute('style', 'opacity: 0');
  rect.setAttribute('x', x - this.TARGET_OVERHANG_);
  rect.setAttribute('y', y - this.TARGET_OVERHANG_);
  rect.setAttribute('width',  width + 2 * this.TARGET_OVERHANG_);
  rect.setAttribute('height', 2 * this.TARGET_OVERHANG_);
  rect.setAttribute('rx', this.TARGET_OVERHANG_);
  rect.setAttribute('ry', this.TARGET_OVERHANG_);
  svgParent.appendChild(rect);
  this.trackTarget_ = rect;
  var knob = document.createElementNS(Slider.SVG_NS_, 'path');
  knob.setAttribute('class', 'sliderKnob');
  knob.setAttribute('d', 'm 0,0 l -8,8 v 12 h 16 v -12 z');
  svgParent.appendChild(knob);
  this.knob_ = knob;
  var circle = document.createElementNS(Slider.SVG_NS_, 'circle');
  circle.setAttribute('style', 'opacity: 0');
  circle.setAttribute('r', this.TARGET_OVERHANG_);
  circle.setAttribute('cy', y);
  svgParent.appendChild(circle);
  this.knobTarget_ = circle;
  this.setValue(0.5);

  // Find the root SVG object.
  while (svgParent && svgParent.nodeName.toLowerCase() != 'svg') {
    svgParent = svgParent.parentNode;
  }
  this.SVG_ = svgParent;

  // Bind the events to this slider.
  Slider.bindEvent_(this.knobTarget_, 'mousedown', this, this.knobMouseDown_);
  Slider.bindEvent_(this.knobTarget_, 'touchstart', this, this.knobMouseDown_);
  Slider.bindEvent_(this.trackTarget_, 'mousedown', this, this.rectMouseDown_);
  Slider.bindEvent_(this.SVG_, 'mouseup', null, Slider.knobMouseUp_);
  Slider.bindEvent_(this.SVG_, 'touchend', null, Slider.knobMouseUp_);
  Slider.bindEvent_(this.SVG_, 'mousemove', null, Slider.knobMouseMove_);
  Slider.bindEvent_(this.SVG_, 'touchmove', null, Slider.knobMouseMove_);
  Slider.bindEvent_(document, 'mouseover', null, Slider.mouseOver_);
}
Object representing a horizontal slider widget.
@param {number} x The horizontal offset of the slider.
@param {number} y The vertical offset of the slider.
@param {number} width The total width of the slider.
@param {!Element} svgParent The SVG element to append the slider to.
@param {Function=} opt_changeFunc Optional callback function that will be
    called when the slider is moved.  The current value is passed.
@constructor