NumberControllerSlider = function(object, property, min, max, step) {

    NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step });

    var _this = this;

    this.__background = document.createElement('div');
    this.__foreground = document.createElement('div');
    


    dom.bind(this.__background, 'mousedown', onMouseDown);
    
    dom.addClass(this.__background, 'slider');
    dom.addClass(this.__foreground, 'slider-fg');

    function onMouseDown(e) {

      dom.bind(window, 'mousemove', onMouseDrag);
      dom.bind(window, 'mouseup', onMouseUp);

      onMouseDrag(e);
    }

    function onMouseDrag(e) {

      e.preventDefault();

      var offset = dom.getOffset(_this.__background);
      var width = dom.getWidth(_this.__background);
      
      _this.setValue(
        map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
      );

      return false;

    }

    function onMouseUp() {
      dom.unbind(window, 'mousemove', onMouseDrag);
      dom.unbind(window, 'mouseup', onMouseUp);
      if (_this.__onFinishChange) {
        _this.__onFinishChange.call(_this, _this.getValue());
      }
    }

    this.updateDisplay();

    this.__background.appendChild(this.__foreground);
    this.domElement.appendChild(this.__background);

  }
@class Represents a given property of an object that is a number, contains
a minimum and maximum, and provides a slider element with which to
manipulate it. It should be noted that the slider element is made up of
<code>&lt;div&gt;</code> tags, <strong>not</strong> the html5
<code>&lt;slider&gt;</code> element.

@extends dat.controllers.Controller
@extends dat.controllers.NumberController

@param {Object} object The object to be manipulated
@param {string} property The name of the property to be manipulated
@param {Number} minValue Minimum allowed value
@param {Number} maxValue Maximum allowed value
@param {Number} stepValue Increment by which to change value

@member dat.controllers