diff --git a/bower.json b/bower.json
index ae0eccb..9ecd9f4 100644
--- a/bower.json
+++ b/bower.json
@@ -4,7 +4,7 @@
     "dist/react-input-range.js",
     "dist/react-input-range.css"
   ],
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React component for inputting numeric values within a range",
   "homepage": "https://github.com/davidchin/react-input-range",
   "authors": [
diff --git a/dist/react-input-range.js b/dist/react-input-range.js
index 7367010..cfcec87 100644
--- a/dist/react-input-range.js
+++ b/dist/react-input-range.js
@@ -12,8 +12,6 @@ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_ag
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
@@ -30,34 +28,82 @@ var _Track = require('./Track');
 
 var _Track2 = _interopRequireDefault(_Track);
 
-var _ValueTransformer = require('./ValueTransformer');
+var _Label = require('./Label');
+
+var _Label2 = _interopRequireDefault(_Label);
+
+var _defaultClassNames = require('./defaultClassNames');
+
+var _defaultClassNames2 = _interopRequireDefault(_defaultClassNames);
 
-var _ValueTransformer2 = _interopRequireDefault(_ValueTransformer);
+var _valueTransformer = require('./valueTransformer');
+
+var _valueTransformer2 = _interopRequireDefault(_valueTransformer);
 
 var _util = require('./util');
 
 var _propTypes = require('./propTypes');
 
-var _defaultClassNames = require('./defaultClassNames');
+var KeyCode = {
+  LEFT_ARROW: 37,
+  RIGHT_ARROW: 39
+};
 
-var _defaultClassNames2 = _interopRequireDefault(_defaultClassNames);
+function isWithinRange(inputRange, values) {
+  var props = inputRange.props;
+
+  if (inputRange.isMultiValue) {
+    return values.min >= props.minValue && values.max <= props.maxValue && values.min < values.max;
+  }
+
+  return values.max >= props.minValue && values.max <= props.maxValue;
+}
+
+function hasStepDifference(inputRange, values) {
+  var props = inputRange.props;
+
+  var currentValues = _valueTransformer2['default'].valuesFromProps(inputRange);
+
+  return (0, _util.length)(values.min, currentValues.min) >= props.step || (0, _util.length)(values.max, currentValues.max) >= props.step;
+}
 
-function isNewStep(component, value, oldValue) {
-  return Math.abs(value - oldValue) >= component.props.step;
+function shouldUpdate(inputRange, values) {
+  return isWithinRange(inputRange, values) && hasStepDifference(inputRange, values);
 }
 
-function getKeyBySlider(component, slider) {
-  if (slider === component.refs.sliderMin) {
+function getComponentClassName(inputRange) {
+  var props = inputRange.props;
+
+  if (!props.disabled) {
+    return props.classNames.component;
+  }
+
+  return props.classNames.component + ' is-disabled';
+}
+
+function getKeyFromSlider(inputRange, slider) {
+  if (slider === inputRange.refs.sliderMin) {
     return 'min';
   }
 
   return 'max';
 }
 
-function getKeyByPosition(component, position) {
-  if (component.isMultiValue) {
-    var distanceToMin = (0, _util.distanceTo)(position, component.state.positions.min);
-    var distanceToMax = (0, _util.distanceTo)(position, component.state.positions.max);
+function getKeys(inputRange) {
+  if (inputRange.isMultiValue) {
+    return ['max', 'min'];
+  }
+
+  return ['max'];
+}
+
+function getKeyByPosition(inputRange, position) {
+  var values = _valueTransformer2['default'].valuesFromProps(inputRange);
+  var positions = _valueTransformer2['default'].positionsFromValues(inputRange, values);
+
+  if (inputRange.isMultiValue) {
+    var distanceToMin = (0, _util.distanceTo)(position, positions.min);
+    var distanceToMax = (0, _util.distanceTo)(position, positions.max);
 
     if (distanceToMin < distanceToMax) {
       return 'min';
@@ -67,18 +113,101 @@ function getKeyByPosition(component, position) {
   return 'max';
 }
 
-function getKeys(component) {
-  if (component.isMultiValue) {
-    return ['max', 'min'];
+function renderSliders(inputRange) {
+  var classNames = inputRange.props.classNames;
+
+  var sliders = [];
+  var keys = getKeys(inputRange);
+  var values = _valueTransformer2['default'].valuesFromProps(inputRange);
+  var percentages = _valueTransformer2['default'].percentagesFromValues(inputRange, values);
+
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var key = _step.value;
+
+      var value = values[key];
+      var percentage = percentages[key];
+      var ref = 'slider' + (0, _util.captialize)(key);
+
+      var _inputRange$props = inputRange.props;
+      var maxValue = _inputRange$props.maxValue;
+      var minValue = _inputRange$props.minValue;
+
+      if (key === 'min') {
+        maxValue = values.max;
+      } else {
+        minValue = values.min;
+      }
+
+      var slider = _react2['default'].createElement(_Slider2['default'], {
+        classNames: classNames,
+        key: key,
+        maxValue: maxValue,
+        minValue: minValue,
+        onSliderKeyDown: inputRange.handleSliderKeyDown,
+        onSliderMouseMove: inputRange.handleSliderMouseMove,
+        percentage: percentage,
+        ref: ref,
+        type: key,
+        value: value });
+
+      sliders.push(slider);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator['return']) {
+        _iterator['return']();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
   }
 
-  return ['max'];
+  return sliders;
 }
 
-var KeyCode = {
-  LEFT_ARROW: 37,
-  RIGHT_ARROW: 39
-};
+function renderHiddenInputs(inputRange) {
+  var inputs = [];
+  var keys = getKeys(inputRange);
+
+  var _iteratorNormalCompletion2 = true;
+  var _didIteratorError2 = false;
+  var _iteratorError2 = undefined;
+
+  try {
+    for (var _iterator2 = keys[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var key = _step2.value;
+
+      var _name = inputRange.isMultiValue ? '' + inputRange.props.name + (0, _util.captialize)(key) : inputRange.props.name;
+
+      var input = _react2['default'].createElement('input', { type: 'hidden', name: _name });
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2['return']) {
+        _iterator2['return']();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
+  }
+
+  return inputs;
+}
 
 var InputRange = (function (_React$Component) {
   _inherits(InputRange, _React$Component);
@@ -88,171 +217,71 @@ var InputRange = (function (_React$Component) {
 
     _get(Object.getPrototypeOf(InputRange.prototype), 'constructor', this).call(this, props);
 
-    var state = {
-      didChange: false,
-      percentages: {
-        min: 0,
-        max: 0
-      },
-      positions: {
-        min: { x: 0, y: 0 },
-        max: { x: 0, y: 0 }
-      },
-      values: {
-        min: 0,
-        max: 0
-      }
-    };
-
-    this.state = state;
-    this.valueTransformer = new _ValueTransformer2['default'](this);
-    this.isMultiValue = this.props.hasOwnProperty('defaultValues') || this.props.hasOwnProperty('values');
-
     (0, _util.autobind)(['handleSliderMouseMove', 'handleSliderKeyDown', 'handleTrackMouseDown'], this);
   }
 
   _createClass(InputRange, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.setPositionsByProps(this.props);
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var props = (0, _util.omit)(nextProps, ['defaultValue', 'defaultValues']);
-
-      this.setPositionsByProps(props);
-    }
-  }, {
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var currentProps = this.props;
-      var currentState = this.state;
-      var shouldUpdate = currentState.values.min !== nextState.values.min || currentState.values.max !== nextState.values.max || currentState.value !== nextState.value || currentProps.minValue !== nextProps.minValue || currentProps.maxValue !== nextProps.maxValue;
-
-      return shouldUpdate;
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      if (this.props.onChange && this.state.didChange) {
-        var results = this.state.values.max;
-
-        if (this.isMultiValue) {
-          results = this.state.values;
-        }
+    key: 'updatePosition',
+    value: function updatePosition(key, position) {
+      var values = _valueTransformer2['default'].valuesFromProps(this);
+      var positions = _valueTransformer2['default'].positionsFromValues(this, values);
 
-        this.props.onChange(this, results);
-      }
+      positions[key] = position;
 
-      this.setState({
-        didChange: true
-      });
+      this.updatePositions(positions);
     }
   }, {
-    key: 'setPositions',
-    value: function setPositions(positions) {
+    key: 'updatePositions',
+    value: function updatePositions(positions) {
       var values = {
-        min: this.valueTransformer.valueFromPosition(positions.min),
-        max: this.valueTransformer.valueFromPosition(positions.max)
+        min: _valueTransformer2['default'].valueFromPosition(this, positions.min),
+        max: _valueTransformer2['default'].valueFromPosition(this, positions.max)
       };
 
       var transformedValues = {
-        min: this.valueTransformer.stepValueFromValue(values.min),
-        max: this.valueTransformer.stepValueFromValue(values.max)
-      };
-
-      var transformedPositions = {
-        min: this.valueTransformer.positionFromValue(transformedValues.min),
-        max: this.valueTransformer.positionFromValue(transformedValues.max)
-      };
-
-      var transformedPercentages = {
-        min: this.valueTransformer.percentageFromPosition(transformedPositions.min),
-        max: this.valueTransformer.percentageFromPosition(transformedPositions.max)
+        min: _valueTransformer2['default'].stepValueFromValue(this, values.min),
+        max: _valueTransformer2['default'].stepValueFromValue(this, values.max)
       };
 
-      var isStep = isNewStep(this, transformedValues.min, this.state.values.min) || isNewStep(this, transformedValues.max, this.state.values.max);
-      var isValid = !this.isMultiValue || transformedValues.min < transformedValues.max;
-      var shouldUpdate = isStep && isValid;
-
-      if (shouldUpdate) {
-        var state = {
-          percentages: transformedPercentages,
-          positions: transformedPositions,
-          values: transformedValues
-        };
-
-        this.setState(state);
-      }
-    }
-  }, {
-    key: 'setPosition',
-    value: function setPosition(slider, position) {
-      var key = slider && slider.props.type || getKeyByPosition(this, position);
-      var positions = (0, _util.extend)({}, this.state.positions, _defineProperty({}, key, position));
-
-      this.setPositions(positions);
+      this.updateValues(transformedValues);
     }
   }, {
-    key: 'setPositionByValue',
-    value: function setPositionByValue(slider, value) {
-      if (!(0, _util.isNumber)(value)) {
-        return;
-      }
+    key: 'updateValue',
+    value: function updateValue(key, value) {
+      var values = _valueTransformer2['default'].valuesFromProps(this);
 
-      var validValue = (0, _util.clamp)(value, this.props.minValue, this.props.maxValue);
-      var position = this.valueTransformer.positionFromValue(validValue);
+      values[key] = value;
 
-      this.setPosition(slider, position);
+      this.updateValues(values);
     }
   }, {
-    key: 'setPositionsByValues',
-    value: function setPositionsByValues(values) {
-      if (!values || !(0, _util.isNumber)(values.min) || !(0, _util.isNumber)(values.max)) {
+    key: 'updateValues',
+    value: function updateValues(values) {
+      if (!shouldUpdate(this, values)) {
         return;
       }
 
-      var validValues = {
-        min: (0, _util.clamp)(values.min, this.props.minValue, this.props.maxValue),
-        max: (0, _util.clamp)(values.max, this.props.minValue, this.props.maxValue)
-      };
-
-      var positions = {
-        min: this.valueTransformer.positionFromValue(validValues.min),
-        max: this.valueTransformer.positionFromValue(validValues.max)
-      };
-
-      this.setPositions(positions);
-    }
-  }, {
-    key: 'setPositionsByProps',
-    value: function setPositionsByProps(props) {
       if (this.isMultiValue) {
-        var values = !(0, _util.isEmpty)(props.values) ? props.values : props.defaultValues;
-
-        this.setPositionsByValues(values);
+        this.props.onChange(this, values);
       } else {
-        var value = (0, _util.isNumber)(props.value) ? props.value : props.defaultValue;
-
-        this.setPositionByValue(this.refs.sliderMax, value);
+        this.props.onChange(this, values.max);
       }
     }
   }, {
     key: 'incrementValue',
-    value: function incrementValue(slider) {
-      var key = getKeyBySlider(this, slider);
-      var value = this.state.values[key] + this.props.step;
+    value: function incrementValue(key) {
+      var values = _valueTransformer2['default'].valuesFromProps(this);
+      var value = values[key] + this.props.step;
 
-      this.setPositionByValue(slider, value);
+      this.updateValue(key, value);
     }
   }, {
     key: 'decrementValue',
-    value: function decrementValue(slider) {
-      var key = getKeyBySlider(this, slider);
-      var value = this.state.values[key] - this.props.step;
+    value: function decrementValue(key) {
+      var values = _valueTransformer2['default'].valuesFromProps(this);
+      var value = values[key] - this.props.step;
 
-      this.setPositionByValue(slider, value);
+      this.updateValue(key, value);
     }
   }, {
     key: 'handleSliderMouseMove',
@@ -261,9 +290,10 @@ var InputRange = (function (_React$Component) {
         return;
       }
 
-      var position = this.valueTransformer.positionFromEvent(event);
+      var key = getKeyFromSlider(this, slider);
+      var position = _valueTransformer2['default'].positionFromEvent(this, event);
 
-      this.setPosition(slider, position);
+      this.updatePosition(key, position);
     }
   }, {
     key: 'handleSliderKeyDown',
@@ -272,13 +302,15 @@ var InputRange = (function (_React$Component) {
         return;
       }
 
+      var key = getKeyFromSlider(this, slider);
+
       switch (event.keyCode) {
         case KeyCode.LEFT_ARROW:
-          this.decrementValue(slider);
+          this.decrementValue(key);
           break;
 
         case KeyCode.RIGHT_ARROW:
-          this.incrementValue(slider);
+          this.incrementValue(key);
           break;
 
         default:
@@ -292,112 +324,18 @@ var InputRange = (function (_React$Component) {
         return;
       }
 
-      this.setPosition(null, position);
-    }
-  }, {
-    key: 'renderSliders',
-    value: function renderSliders() {
-      var classNames = this.props.classNames;
-      var sliders = [];
-      var keys = getKeys(this);
-
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
-
-      try {
-        for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var key = _step.value;
-
-          var value = this.state.values[key];
-          var percentage = this.state.percentages[key];
-          var ref = 'slider' + (0, _util.captialize)(key);
-
-          var _props = this.props;
-          var maxValue = _props.maxValue;
-          var minValue = _props.minValue;
-
-          if (key === 'min') {
-            maxValue = this.state.values.max;
-          } else {
-            minValue = this.state.values.min;
-          }
-
-          var slider = _react2['default'].createElement(_Slider2['default'], {
-            classNames: classNames,
-            key: key,
-            maxValue: maxValue,
-            minValue: minValue,
-            onSliderKeyDown: this.handleSliderKeyDown,
-            onSliderMouseMove: this.handleSliderMouseMove,
-            percentage: percentage,
-            ref: ref,
-            type: key,
-            value: value });
-
-          sliders.push(slider);
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator['return']) {
-            _iterator['return']();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-
-      return sliders;
-    }
-  }, {
-    key: 'renderHiddenInputs',
-    value: function renderHiddenInputs() {
-      var inputs = [];
-      var keys = getKeys(this);
-
-      var _iteratorNormalCompletion2 = true;
-      var _didIteratorError2 = false;
-      var _iteratorError2 = undefined;
-
-      try {
-        for (var _iterator2 = keys[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-          var key = _step2.value;
-
-          var _name = this.isMultiValue ? '' + this.props.name + (0, _util.captialize)(key) : this.props.name;
-
-          var input = _react2['default'].createElement('input', { type: 'hidden', name: _name });
-        }
-      } catch (err) {
-        _didIteratorError2 = true;
-        _iteratorError2 = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion2 && _iterator2['return']) {
-            _iterator2['return']();
-          }
-        } finally {
-          if (_didIteratorError2) {
-            throw _iteratorError2;
-          }
-        }
-      }
+      var key = getKeyByPosition(this, position);
 
-      return inputs;
+      this.updatePosition(key, position);
     }
   }, {
     key: 'render',
     value: function render() {
       var classNames = this.props.classNames;
-      var componentClassName = classNames.component;
 
-      if (this.props.disabled) {
-        componentClassName = componentClassName + ' is-disabled';
-      }
+      var componentClassName = getComponentClassName(this);
+      var values = _valueTransformer2['default'].valuesFromProps(this);
+      var percentages = _valueTransformer2['default'].percentagesFromValues(this, values);
 
       return _react2['default'].createElement(
         'div',
@@ -406,33 +344,29 @@ var InputRange = (function (_React$Component) {
           ref: 'inputRange',
           className: componentClassName },
         _react2['default'].createElement(
-          'span',
-          { className: classNames.labelMin },
-          _react2['default'].createElement(
-            'span',
-            { className: classNames.labelContainer },
-            this.props.minValue
-          )
+          _Label2['default'],
+          {
+            className: classNames.labelMin,
+            containerClassName: classNames.labelContainer },
+          this.props.minValue
         ),
         _react2['default'].createElement(
           _Track2['default'],
           {
             classNames: classNames,
             ref: 'track',
-            percentages: this.state.percentages,
+            percentages: percentages,
             onTrackMouseDown: this.handleTrackMouseDown },
-          this.renderSliders()
+          renderSliders(this)
         ),
         _react2['default'].createElement(
-          'span',
-          { className: classNames.labelMax },
-          _react2['default'].createElement(
-            'span',
-            { className: classNames.labelContainer },
-            this.props.maxValue
-          )
+          _Label2['default'],
+          {
+            className: classNames.labelMax,
+            containerClassName: classNames.labelContainer },
+          this.props.maxValue
         ),
-        this.renderHiddenInputs()
+        renderHiddenInputs(this)
       );
     }
   }, {
@@ -440,7 +374,21 @@ var InputRange = (function (_React$Component) {
     get: function get() {
       var track = this.refs.track;
 
-      return track && track.clientRect;
+      if (track) {
+        return track.clientRect;
+      }
+
+      return {
+        height: 0,
+        left: 0,
+        top: 0,
+        width: 0
+      };
+    }
+  }, {
+    key: 'isMultiValue',
+    get: function get() {
+      return (0, _util.isObject)(this.props.value) || (0, _util.isObject)(this.props.defaultValue);
     }
   }]);
 
@@ -451,30 +399,93 @@ InputRange.propTypes = {
   ariaLabelledby: _react2['default'].PropTypes.string,
   classNames: _react2['default'].PropTypes.objectOf(_react2['default'].PropTypes.string),
   defaultValue: _propTypes.maxMinValuePropType,
-  defaultValues: _propTypes.maxMinValuePropType,
   disabled: _react2['default'].PropTypes.bool,
   maxValue: _propTypes.maxMinValuePropType,
   minValue: _propTypes.maxMinValuePropType,
   name: _react2['default'].PropTypes.string,
-  onChange: _react2['default'].PropTypes.func,
+  onChange: _react2['default'].PropTypes.func.isRequired,
   step: _react2['default'].PropTypes.number,
-  value: _propTypes.maxMinValuePropType,
-  values: _propTypes.maxMinValuePropType
+  value: _propTypes.maxMinValuePropType
 };
 
 InputRange.defaultProps = {
   classNames: _defaultClassNames2['default'],
+  defaultValue: 0,
   disabled: false,
-  minValue: 0,
   maxValue: 10,
-  step: 1
+  minValue: 0,
+  step: 1,
+  value: null
 };
 
 exports['default'] = InputRange;
 module.exports = exports['default'];
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./Slider":2,"./Track":3,"./ValueTransformer":4,"./defaultClassNames":5,"./propTypes":6,"./util":7}],2:[function(require,module,exports){
+},{"./Label":2,"./Slider":3,"./Track":4,"./defaultClassNames":5,"./propTypes":6,"./util":7,"./valueTransformer":8}],2:[function(require,module,exports){
+(function (global){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
+
+var _react2 = _interopRequireDefault(_react);
+
+var Label = (function (_React$Component) {
+  _inherits(Label, _React$Component);
+
+  function Label() {
+    _classCallCheck(this, Label);
+
+    _get(Object.getPrototypeOf(Label.prototype), 'constructor', this).apply(this, arguments);
+  }
+
+  _createClass(Label, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var className = _props.className;
+      var containerClassName = _props.containerClassName;
+
+      return _react2['default'].createElement(
+        'span',
+        { className: className },
+        _react2['default'].createElement(
+          'span',
+          { className: containerClassName },
+          this.props.children
+        )
+      );
+    }
+  }]);
+
+  return Label;
+})(_react2['default'].Component);
+
+Label.propTypes = {
+  children: _react2['default'].PropTypes.node,
+  className: _react2['default'].PropTypes.string,
+  containerClassName: _react2['default'].PropTypes.string
+};
+
+exports['default'] = Label;
+module.exports = exports['default'];
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{}],3:[function(require,module,exports){
 (function (global){
 'use strict';
 
@@ -496,8 +507,28 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global !=
 
 var _react2 = _interopRequireDefault(_react);
 
+var _Label = require('./Label');
+
+var _Label2 = _interopRequireDefault(_Label);
+
 var _util = require('./util');
 
+function getDocument(slider) {
+  var ownerDocument = slider.refs.slider.ownerDocument;
+
+  return ownerDocument;
+}
+
+function getStyle(slider) {
+  var perc = (slider.props.percentage || 0) * 100;
+  var style = {
+    position: 'absolute',
+    left: perc + '%'
+  };
+
+  return style;
+}
+
 var Slider = (function (_React$Component) {
   _inherits(Slider, _React$Component);
 
@@ -506,37 +537,10 @@ var Slider = (function (_React$Component) {
 
     _get(Object.getPrototypeOf(Slider.prototype), 'constructor', this).call(this, props);
 
-    this.state = {};
-
-    _react2['default'].initializeTouchEvents(true);
-
     (0, _util.autobind)(['handleClick', 'handleMouseDown', 'handleMouseUp', 'handleMouseMove', 'handleTouchStart', 'handleTouchEnd', 'handleTouchMove', 'handleKeyDown'], this);
   }
 
   _createClass(Slider, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.setPosition(this.props);
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      this.setPosition(nextProps);
-    }
-  }, {
-    key: 'setPosition',
-    value: function setPosition(props) {
-      var perc = (props.percentage || 0) * 100;
-      var newStyle = {
-        position: 'absolute',
-        left: perc + '%'
-      };
-
-      var style = (0, _util.extend)({}, this.state.style, newStyle);
-
-      this.setState({ style: style });
-    }
-  }, {
     key: 'handleClick',
     value: function handleClick(event) {
       event.preventDefault();
@@ -544,7 +548,7 @@ var Slider = (function (_React$Component) {
   }, {
     key: 'handleMouseDown',
     value: function handleMouseDown() {
-      var document = this.document;
+      var document = getDocument(this);
 
       document.addEventListener('mousemove', this.handleMouseMove);
       document.addEventListener('mouseup', this.handleMouseUp);
@@ -552,7 +556,7 @@ var Slider = (function (_React$Component) {
   }, {
     key: 'handleMouseUp',
     value: function handleMouseUp() {
-      var document = this.document;
+      var document = getDocument(this);
 
       document.removeEventListener('mousemove', this.handleMouseMove);
       document.removeEventListener('mouseup', this.handleMouseUp);
@@ -565,7 +569,7 @@ var Slider = (function (_React$Component) {
   }, {
     key: 'handleTouchStart',
     value: function handleTouchStart(event) {
-      var document = this.document;
+      var document = getDocument(this);
 
       event.preventDefault();
 
@@ -580,7 +584,7 @@ var Slider = (function (_React$Component) {
   }, {
     key: 'handleTouchEnd',
     value: function handleTouchEnd() {
-      var document = this.document;
+      var document = getDocument(this);
 
       event.preventDefault();
 
@@ -596,19 +600,20 @@ var Slider = (function (_React$Component) {
     key: 'render',
     value: function render() {
       var classNames = this.props.classNames;
-      var style = this.state.style || {};
+      var style = getStyle(this);
 
       return _react2['default'].createElement(
         'span',
-        { className: classNames.sliderContainer, style: style },
+        {
+          className: classNames.sliderContainer,
+          ref: 'slider',
+          style: style },
         _react2['default'].createElement(
-          'span',
-          { className: classNames.labelValue },
-          _react2['default'].createElement(
-            'span',
-            { className: classNames.labelContainer },
-            this.props.value
-          )
+          _Label2['default'],
+          {
+            className: classNames.labelValue,
+            containerClassName: classNames.labelContainer },
+          this.props.value
         ),
         _react2['default'].createElement('a', {
           'aria-labelledby': this.props.ariaLabelledby,
@@ -625,14 +630,6 @@ var Slider = (function (_React$Component) {
           role: 'slider' })
       );
     }
-  }, {
-    key: 'document',
-    get: function get() {
-      var element = _react2['default'].findDOMNode(this);
-      var document = element.ownerDocument;
-
-      return document;
-    }
   }]);
 
   return Slider;
@@ -654,7 +651,7 @@ exports['default'] = Slider;
 module.exports = exports['default'];
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./util":7}],3:[function(require,module,exports){
+},{"./Label":2,"./util":7}],4:[function(require,module,exports){
 (function (global){
 'use strict';
 
@@ -678,6 +675,20 @@ var _react2 = _interopRequireDefault(_react);
 
 var _util = require('./util');
 
+function getActiveTrackStyle(track) {
+  var props = track.props;
+
+  var width = (props.percentages.max - props.percentages.min) * 100 + '%';
+  var left = props.percentages.min * 100 + '%';
+
+  var activeTrackStyle = {
+    left: left,
+    width: width
+  };
+
+  return activeTrackStyle;
+}
+
 var Track = (function (_React$Component) {
   _inherits(Track, _React$Component);
 
@@ -686,39 +697,10 @@ var Track = (function (_React$Component) {
 
     _get(Object.getPrototypeOf(Track.prototype), 'constructor', this).call(this, props);
 
-    this.state = {};
-
-    _react2['default'].initializeTouchEvents(true);
-
     (0, _util.autobind)(['handleMouseDown', 'handleTouchStart'], this);
   }
 
   _createClass(Track, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.setActiveTrackWidth(this.props);
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      this.setActiveTrackWidth(nextProps);
-    }
-  }, {
-    key: 'setActiveTrackWidth',
-    value: function setActiveTrackWidth(props) {
-      var width = (props.percentages.max - props.percentages.min) * 100 + '%';
-      var left = props.percentages.min * 100 + '%';
-
-      var newActiveTrackStyle = {
-        left: left,
-        width: width
-      };
-
-      var activeTrackStyle = (0, _util.extend)({}, this.state.activeTrackStyle, newActiveTrackStyle);
-
-      this.setState({ activeTrackStyle: activeTrackStyle });
-    }
-  }, {
     key: 'handleMouseDown',
     value: function handleMouseDown(event) {
       var trackClientRect = this.clientRect;
@@ -744,15 +726,16 @@ var Track = (function (_React$Component) {
   }, {
     key: 'render',
     value: function render() {
-      var activeTrackStyle = this.state.activeTrackStyle || {};
+      var activeTrackStyle = getActiveTrackStyle(this);
       var classNames = this.props.classNames;
 
       return _react2['default'].createElement(
         'div',
         {
+          className: classNames.trackContainer,
           onMouseDown: this.handleMouseDown,
           onTouchStart: this.handleTouchStart,
-          className: classNames.trackContainer },
+          ref: 'track' },
         _react2['default'].createElement('div', {
           style: activeTrackStyle,
           className: classNames.trackActive }),
@@ -762,7 +745,8 @@ var Track = (function (_React$Component) {
   }, {
     key: 'clientRect',
     get: function get() {
-      var track = _react2['default'].findDOMNode(this);
+      var track = this.refs.track;
+
       var clientRect = track.getClientRects()[0];
 
       return clientRect;
@@ -783,100 +767,13 @@ exports['default'] = Track;
 module.exports = exports['default'];
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./util":7}],4:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-var _util = require('./util');
-
-var ValueTransformer = (function () {
-  function ValueTransformer(component) {
-    _classCallCheck(this, ValueTransformer);
-
-    this.component = component;
-  }
-
-  _createClass(ValueTransformer, [{
-    key: 'valueFromPosition',
-    value: function valueFromPosition(position) {
-      var sizePerc = this.percentageFromPosition(position);
-      var valueDiff = this.component.props.maxValue - this.component.props.minValue;
-      var value = this.component.props.minValue + valueDiff * sizePerc;
-
-      return value;
-    }
-  }, {
-    key: 'positionFromValue',
-    value: function positionFromValue(value) {
-      var length = this.component.trackClientRect.width;
-      var valuePerc = this.percentageFromValue(value);
-      var positionValue = valuePerc * length;
-
-      return {
-        x: positionValue,
-        y: 0
-      };
-    }
-  }, {
-    key: 'positionFromEvent',
-    value: function positionFromEvent(event) {
-      var trackClientRect = this.component.trackClientRect;
-      var length = trackClientRect.width;
-
-      var _ref = event.touches ? event.touches[0] : event;
-
-      var clientX = _ref.clientX;
-
-      var position = {
-        x: (0, _util.clamp)(clientX - trackClientRect.left, 0, length),
-        y: 0
-      };
-
-      return position;
-    }
-  }, {
-    key: 'percentageFromPosition',
-    value: function percentageFromPosition(position) {
-      var length = this.component.trackClientRect.width;
-      var sizePerc = position.x / length;
-
-      return sizePerc || 0;
-    }
-  }, {
-    key: 'percentageFromValue',
-    value: function percentageFromValue(value) {
-      var validValue = (0, _util.clamp)(value, this.component.props.minValue, this.component.props.maxValue);
-      var valueDiff = this.component.props.maxValue - this.component.props.minValue;
-      var valuePerc = (validValue - this.component.props.minValue) / valueDiff;
-
-      return valuePerc || 0;
-    }
-  }, {
-    key: 'stepValueFromValue',
-    value: function stepValueFromValue(value) {
-      return Math.round(value / this.component.props.step) * this.component.props.step;
-    }
-  }]);
-
-  return ValueTransformer;
-})();
-
-exports['default'] = ValueTransformer;
-module.exports = exports['default'];
-
 },{"./util":7}],5:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
+
 var defaultClassNames = {
   component: 'InputRange',
   labelContainer: 'InputRange-labelContainer',
@@ -898,28 +795,25 @@ module.exports = exports['default'];
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-exports.maxMinValuePropType = maxMinValuePropType;
 
 var _util = require('./util');
 
-function numberPredicate(value) {
-  return typeof value === 'number';
-}
-
 function maxMinValuePropType(props) {
   var maxValue = props.maxValue;
   var minValue = props.minValue;
   var value = props.value;
-  var values = props.values;
   var defaultValue = props.defaultValue;
-  var defaultValues = props.defaultValues;
+  var isValueNumber = (0, _util.isNumber)(value);
+  var isDefaultValueNumber = (0, _util.isNumber)(defaultValue);
+  var isValueNumberObject = (0, _util.objectOf)(value, _util.isNumber);
+  var isDefaultValueNumberObject = (0, _util.objectOf)(defaultValue, _util.isNumber);
 
-  if (!values && !defaultValues && !numberPredicate(value) && !numberPredicate(defaultValue)) {
-    return new Error('`value` or `defaultValue` must be a number');
+  if (value === undefined) {
+    return new Error('`value` must be defined');
   }
 
-  if (!value && !defaultValue && !(0, _util.objectOf)(values, numberPredicate) && !(0, _util.objectOf)(defaultValues, numberPredicate)) {
-    return new Error('`values` or `defaultValues` must be an object of numbers');
+  if (!isValueNumber && !isDefaultValueNumber && !isValueNumberObject && !isDefaultValueNumberObject) {
+    return new Error('`value` or `defaultValue` must be a number or an array');
   }
 
   if (minValue >= maxValue) {
@@ -935,12 +829,15 @@ function maxMinValuePropType(props) {
   }
 }
 
+exports.maxMinValuePropType = maxMinValuePropType;
+
 },{"./util":7}],7:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
+
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -974,10 +871,18 @@ function distanceTo(pointA, pointB) {
   return Math.sqrt(Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2));
 }
 
+function length(numA, numB) {
+  return Math.abs(numA - numB);
+}
+
 function isNumber(number) {
   return typeof number === 'number';
 }
 
+function isObject(object) {
+  return object !== null && typeof object === 'object';
+}
+
 function isEmpty(obj) {
   if (!obj) {
     return true;
@@ -1005,7 +910,7 @@ function arrayOf(array, predicate) {
 }
 
 function objectOf(object, predicate, keys) {
-  if (typeof object !== 'object') {
+  if (!isObject(object)) {
     return false;
   }
 
@@ -1037,6 +942,8 @@ var util = {
   extend: extend,
   isEmpty: isEmpty,
   isNumber: isNumber,
+  isObject: isObject,
+  length: length,
   objectOf: objectOf,
   omit: omit
 };
@@ -1051,6 +958,126 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
+var _util = require('./util');
+
+function percentageFromPosition(inputRange, position) {
+  var length = inputRange.trackClientRect.width;
+  var sizePerc = position.x / length;
+
+  return sizePerc || 0;
+}
+
+function valueFromPosition(inputRange, position) {
+  var sizePerc = percentageFromPosition(inputRange, position);
+  var valueDiff = inputRange.props.maxValue - inputRange.props.minValue;
+  var value = inputRange.props.minValue + valueDiff * sizePerc;
+
+  return value;
+}
+
+function valuesFromProps(inputRange) {
+  var _ref = arguments.length <= 1 || arguments[1] === undefined ? inputRange : arguments[1];
+
+  var props = _ref.props;
+  return (function () {
+    if (inputRange.isMultiValue) {
+      var values = props.value;
+
+      if ((0, _util.isEmpty)(values) || !(0, _util.objectOf)(values, _util.isNumber)) {
+        values = props.defaultValue;
+      }
+
+      return Object.create(values);
+    }
+
+    var value = (0, _util.isNumber)(props.value) ? props.value : props.defaultValue;
+
+    return {
+      min: props.minValue,
+      max: value
+    };
+  })();
+}
+
+function percentageFromValue(inputRange, value) {
+  var validValue = (0, _util.clamp)(value, inputRange.props.minValue, inputRange.props.maxValue);
+  var valueDiff = inputRange.props.maxValue - inputRange.props.minValue;
+  var valuePerc = (validValue - inputRange.props.minValue) / valueDiff;
+
+  return valuePerc || 0;
+}
+
+function percentagesFromValues(inputRange, values) {
+  var percentages = {
+    min: percentageFromValue(inputRange, values.min),
+    max: percentageFromValue(inputRange, values.max)
+  };
+
+  return percentages;
+}
+
+function positionFromValue(inputRange, value) {
+  var length = inputRange.trackClientRect.width;
+  var valuePerc = percentageFromValue(inputRange, value);
+  var positionValue = valuePerc * length;
+
+  return {
+    x: positionValue,
+    y: 0
+  };
+}
+
+function positionsFromValues(inputRange, values) {
+  var positions = {
+    min: positionFromValue(inputRange, values.min),
+    max: positionFromValue(inputRange, values.max)
+  };
+
+  return positions;
+}
+
+function positionFromEvent(inputRange, event) {
+  var trackClientRect = inputRange.trackClientRect;
+  var length = trackClientRect.width;
+
+  var _ref2 = event.touches ? event.touches[0] : event;
+
+  var clientX = _ref2.clientX;
+
+  var position = {
+    x: (0, _util.clamp)(clientX - trackClientRect.left, 0, length),
+    y: 0
+  };
+
+  return position;
+}
+
+function stepValueFromValue(inputRange, value) {
+  return Math.round(value / inputRange.props.step) * inputRange.props.step;
+}
+
+var valueTransformer = {
+  percentageFromPosition: percentageFromPosition,
+  percentageFromValue: percentageFromValue,
+  percentagesFromValues: percentagesFromValues,
+  positionFromEvent: positionFromEvent,
+  positionFromValue: positionFromValue,
+  positionsFromValues: positionsFromValues,
+  stepValueFromValue: stepValueFromValue,
+  valueFromPosition: valueFromPosition,
+  valuesFromProps: valuesFromProps
+};
+
+exports['default'] = valueTransformer;
+module.exports = exports['default'];
+
+},{"./util":7}],9:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 var _InputRange = require('./InputRange');
@@ -1060,5 +1087,5 @@ var _InputRange2 = _interopRequireDefault(_InputRange);
 exports['default'] = _InputRange2['default'];
 module.exports = exports['default'];
 
-},{"./InputRange":1}]},{},[8])(8)
+},{"./InputRange":1}]},{},[9])(9)
 });
\ No newline at end of file
diff --git a/dist/react-input-range.min.js b/dist/react-input-range.min.js
index 2ea15d5..b528c08 100644
--- a/dist/react-input-range.min.js
+++ b/dist/react-input-range.min.js
@@ -1 +1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.InputRange=e()}}(function(){return function e(t,n,a){function o(i,u){if(!n[i]){if(!t[i]){var s="function"==typeof require&&require;if(!u&&s)return s(i,!0);if(r)return r(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var p=n[i]={exports:{}};t[i][0].call(p.exports,function(e){var n=t[i][1][e];return o(n?n:e)},p,p.exports,e,t,n,a)}return n[i].exports}for(var r="function"==typeof require&&require,i=0;i<a.length;i++)o(a[i]);return o}({1:[function(e,t,n){(function(a){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e,t,n){return Math.abs(t-n)>=e.props.step}function l(e,t){return t===e.refs.sliderMin?"min":"max"}function p(e,t){if(e.isMultiValue){var n=P.distanceTo(t,e.state.positions.min),a=P.distanceTo(t,e.state.positions.max);if(a>n)return"min"}return"max"}function c(e){return e.isMultiValue?["max","min"]:["max"]}Object.defineProperty(n,"__esModule",{value:!0});var f=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),d=function(e,t,n){for(var a=!0;a;){var o=e,r=t,i=n;u=l=s=void 0,a=!1,null===o&&(o=Function.prototype);var u=Object.getOwnPropertyDescriptor(o,r);if(void 0!==u){if("value"in u)return u.value;var s=u.get;return void 0===s?void 0:s.call(i)}var l=Object.getPrototypeOf(o);if(null===l)return void 0;e=l,t=r,n=i,a=!0}},h="undefined"!=typeof window?window.React:"undefined"!=typeof a?a.React:null,m=o(h),v=e("./Slider"),y=o(v),b=e("./Track"),w=o(b),T=e("./ValueTransformer"),g=o(T),P=e("./util"),V=e("./propTypes"),x=e("./defaultClassNames"),M=o(x),k={LEFT_ARROW:37,RIGHT_ARROW:39},O=function(e){function t(e){i(this,t),d(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e);var n={didChange:!1,percentages:{min:0,max:0},positions:{min:{x:0,y:0},max:{x:0,y:0}},values:{min:0,max:0}};this.state=n,this.valueTransformer=new g["default"](this),this.isMultiValue=this.props.hasOwnProperty("defaultValues")||this.props.hasOwnProperty("values"),P.autobind(["handleSliderMouseMove","handleSliderKeyDown","handleTrackMouseDown"],this)}return u(t,e),f(t,[{key:"componentDidMount",value:function(){this.setPositionsByProps(this.props)}},{key:"componentWillReceiveProps",value:function(e){var t=P.omit(e,["defaultValue","defaultValues"]);this.setPositionsByProps(t)}},{key:"shouldComponentUpdate",value:function(e,t){var n=this.props,a=this.state,o=a.values.min!==t.values.min||a.values.max!==t.values.max||a.value!==t.value||n.minValue!==e.minValue||n.maxValue!==e.maxValue;return o}},{key:"componentDidUpdate",value:function(){if(this.props.onChange&&this.state.didChange){var e=this.state.values.max;this.isMultiValue&&(e=this.state.values),this.props.onChange(this,e)}this.setState({didChange:!0})}},{key:"setPositions",value:function(e){var t={min:this.valueTransformer.valueFromPosition(e.min),max:this.valueTransformer.valueFromPosition(e.max)},n={min:this.valueTransformer.stepValueFromValue(t.min),max:this.valueTransformer.stepValueFromValue(t.max)},a={min:this.valueTransformer.positionFromValue(n.min),max:this.valueTransformer.positionFromValue(n.max)},o={min:this.valueTransformer.percentageFromPosition(a.min),max:this.valueTransformer.percentageFromPosition(a.max)},r=s(this,n.min,this.state.values.min)||s(this,n.max,this.state.values.max),i=!this.isMultiValue||n.min<n.max,u=r&&i;if(u){var l={percentages:o,positions:a,values:n};this.setState(l)}}},{key:"setPosition",value:function(e,t){var n=e&&e.props.type||p(this,t),a=P.extend({},this.state.positions,r({},n,t));this.setPositions(a)}},{key:"setPositionByValue",value:function(e,t){if(P.isNumber(t)){var n=P.clamp(t,this.props.minValue,this.props.maxValue),a=this.valueTransformer.positionFromValue(n);this.setPosition(e,a)}}},{key:"setPositionsByValues",value:function(e){if(e&&P.isNumber(e.min)&&P.isNumber(e.max)){var t={min:P.clamp(e.min,this.props.minValue,this.props.maxValue),max:P.clamp(e.max,this.props.minValue,this.props.maxValue)},n={min:this.valueTransformer.positionFromValue(t.min),max:this.valueTransformer.positionFromValue(t.max)};this.setPositions(n)}}},{key:"setPositionsByProps",value:function(e){if(this.isMultiValue){var t=P.isEmpty(e.values)?e.defaultValues:e.values;this.setPositionsByValues(t)}else{var n=P.isNumber(e.value)?e.value:e.defaultValue;this.setPositionByValue(this.refs.sliderMax,n)}}},{key:"incrementValue",value:function(e){var t=l(this,e),n=this.state.values[t]+this.props.step;this.setPositionByValue(e,n)}},{key:"decrementValue",value:function(e){var t=l(this,e),n=this.state.values[t]-this.props.step;this.setPositionByValue(e,n)}},{key:"handleSliderMouseMove",value:function(e,t){if(!this.props.disabled){var n=this.valueTransformer.positionFromEvent(t);this.setPosition(e,n)}}},{key:"handleSliderKeyDown",value:function(e,t){if(!this.props.disabled)switch(t.keyCode){case k.LEFT_ARROW:this.decrementValue(e);break;case k.RIGHT_ARROW:this.incrementValue(e)}}},{key:"handleTrackMouseDown",value:function(e,t){this.props.disabled||this.setPosition(null,t)}},{key:"renderSliders",value:function(){var e=this.props.classNames,t=[],n=c(this),a=!0,o=!1,r=void 0;try{for(var i,u=n[Symbol.iterator]();!(a=(i=u.next()).done);a=!0){var s=i.value,l=this.state.values[s],p=this.state.percentages[s],f="slider"+P.captialize(s),d=this.props,h=d.maxValue,v=d.minValue;"min"===s?h=this.state.values.max:v=this.state.values.min;var b=m["default"].createElement(y["default"],{classNames:e,key:s,maxValue:h,minValue:v,onSliderKeyDown:this.handleSliderKeyDown,onSliderMouseMove:this.handleSliderMouseMove,percentage:p,ref:f,type:s,value:l});t.push(b)}}catch(w){o=!0,r=w}finally{try{!a&&u["return"]&&u["return"]()}finally{if(o)throw r}}return t}},{key:"renderHiddenInputs",value:function(){var e=[],t=c(this),n=!0,a=!1,o=void 0;try{for(var r,i=t[Symbol.iterator]();!(n=(r=i.next()).done);n=!0){var u=r.value,s=this.isMultiValue?""+this.props.name+P.captialize(u):this.props.name;m["default"].createElement("input",{type:"hidden",name:s})}}catch(l){a=!0,o=l}finally{try{!n&&i["return"]&&i["return"]()}finally{if(a)throw o}}return e}},{key:"render",value:function(){var e=this.props.classNames,t=e.component;return this.props.disabled&&(t+=" is-disabled"),m["default"].createElement("div",{"aria-disabled":this.props.disabled,ref:"inputRange",className:t},m["default"].createElement("span",{className:e.labelMin},m["default"].createElement("span",{className:e.labelContainer},this.props.minValue)),m["default"].createElement(w["default"],{classNames:e,ref:"track",percentages:this.state.percentages,onTrackMouseDown:this.handleTrackMouseDown},this.renderSliders()),m["default"].createElement("span",{className:e.labelMax},m["default"].createElement("span",{className:e.labelContainer},this.props.maxValue)),this.renderHiddenInputs())}},{key:"trackClientRect",get:function(){var e=this.refs.track;return e&&e.clientRect}}]),t}(m["default"].Component);O.propTypes={ariaLabelledby:m["default"].PropTypes.string,classNames:m["default"].PropTypes.objectOf(m["default"].PropTypes.string),defaultValue:V.maxMinValuePropType,defaultValues:V.maxMinValuePropType,disabled:m["default"].PropTypes.bool,maxValue:V.maxMinValuePropType,minValue:V.maxMinValuePropType,name:m["default"].PropTypes.string,onChange:m["default"].PropTypes.func,step:m["default"].PropTypes.number,value:V.maxMinValuePropType,values:V.maxMinValuePropType},O.defaultProps={classNames:M["default"],disabled:!1,minValue:0,maxValue:10,step:1},n["default"]=O,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Slider":2,"./Track":3,"./ValueTransformer":4,"./defaultClassNames":5,"./propTypes":6,"./util":7}],2:[function(e,t,n){(function(a){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),s=function(e,t,n){for(var a=!0;a;){var o=e,r=t,i=n;u=l=s=void 0,a=!1,null===o&&(o=Function.prototype);var u=Object.getOwnPropertyDescriptor(o,r);if(void 0!==u){if("value"in u)return u.value;var s=u.get;return void 0===s?void 0:s.call(i)}var l=Object.getPrototypeOf(o);if(null===l)return void 0;e=l,t=r,n=i,a=!0}},l="undefined"!=typeof window?window.React:"undefined"!=typeof a?a.React:null,p=o(l),c=e("./util"),f=function(e){function t(e){r(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={},p["default"].initializeTouchEvents(!0),c.autobind(["handleClick","handleMouseDown","handleMouseUp","handleMouseMove","handleTouchStart","handleTouchEnd","handleTouchMove","handleKeyDown"],this)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){this.setPosition(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.setPosition(e)}},{key:"setPosition",value:function(e){var t=100*(e.percentage||0),n={position:"absolute",left:t+"%"},a=c.extend({},this.state.style,n);this.setState({style:a})}},{key:"handleClick",value:function(e){e.preventDefault()}},{key:"handleMouseDown",value:function(){var e=this.document;e.addEventListener("mousemove",this.handleMouseMove),e.addEventListener("mouseup",this.handleMouseUp)}},{key:"handleMouseUp",value:function(){var e=this.document;e.removeEventListener("mousemove",this.handleMouseMove),e.removeEventListener("mouseup",this.handleMouseUp)}},{key:"handleMouseMove",value:function(e){this.props.onSliderMouseMove(this,e)}},{key:"handleTouchStart",value:function(e){var t=this.document;e.preventDefault(),t.addEventListener("touchmove",this.handleTouchMove),t.addEventListener("touchend",this.handleTouchEnd)}},{key:"handleTouchMove",value:function(e){this.props.onSliderMouseMove(this,e)}},{key:"handleTouchEnd",value:function(){var e=this.document;event.preventDefault(),e.removeEventListener("touchmove",this.handleTouchMove),e.removeEventListener("touchend",this.handleTouchEnd)}},{key:"handleKeyDown",value:function(e){this.props.onSliderKeyDown(this,e)}},{key:"render",value:function(){var e=this.props.classNames,t=this.state.style||{};return p["default"].createElement("span",{className:e.sliderContainer,style:t},p["default"].createElement("span",{className:e.labelValue},p["default"].createElement("span",{className:e.labelContainer},this.props.value)),p["default"].createElement("a",{"aria-labelledby":this.props.ariaLabelledby,"aria-valuemax":this.props.maxValue,"aria-valuemin":this.props.minValue,"aria-valuenow":this.props.value,className:e.slider,draggable:"false",href:"#",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,role:"slider"}))}},{key:"document",get:function(){var e=p["default"].findDOMNode(this),t=e.ownerDocument;return t}}]),t}(p["default"].Component);f.propTypes={ariaLabelledby:p["default"].PropTypes.string,classNames:p["default"].PropTypes.objectOf(p["default"].PropTypes.string),maxValue:p["default"].PropTypes.number,minValue:p["default"].PropTypes.number,onSliderKeyDown:p["default"].PropTypes.func.isRequired,onSliderMouseMove:p["default"].PropTypes.func.isRequired,percentage:p["default"].PropTypes.number.isRequired,type:p["default"].PropTypes.string.isRequired,value:p["default"].PropTypes.number.isRequired},n["default"]=f,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./util":7}],3:[function(e,t,n){(function(a){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),s=function(e,t,n){for(var a=!0;a;){var o=e,r=t,i=n;u=l=s=void 0,a=!1,null===o&&(o=Function.prototype);var u=Object.getOwnPropertyDescriptor(o,r);if(void 0!==u){if("value"in u)return u.value;var s=u.get;return void 0===s?void 0:s.call(i)}var l=Object.getPrototypeOf(o);if(null===l)return void 0;e=l,t=r,n=i,a=!0}},l="undefined"!=typeof window?window.React:"undefined"!=typeof a?a.React:null,p=o(l),c=e("./util"),f=function(e){function t(e){r(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={},p["default"].initializeTouchEvents(!0),c.autobind(["handleMouseDown","handleTouchStart"],this)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){this.setActiveTrackWidth(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.setActiveTrackWidth(e)}},{key:"setActiveTrackWidth",value:function(e){var t=100*(e.percentages.max-e.percentages.min)+"%",n=100*e.percentages.min+"%",a={left:n,width:t},o=c.extend({},this.state.activeTrackStyle,a);this.setState({activeTrackStyle:o})}},{key:"handleMouseDown",value:function(e){var t=this.clientRect,n=e.touches?e.touches[0]:e,a=n.clientX,o={x:a-t.left,y:0};this.props.onTrackMouseDown(this,o)}},{key:"handleTouchStart",value:function(e){e.preventDefault(),this.handleMouseDown(e)}},{key:"render",value:function(){var e=this.state.activeTrackStyle||{},t=this.props.classNames;return p["default"].createElement("div",{onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,className:t.trackContainer},p["default"].createElement("div",{style:e,className:t.trackActive}),this.props.children)}},{key:"clientRect",get:function(){var e=p["default"].findDOMNode(this),t=e.getClientRects()[0];return t}}]),t}(p["default"].Component);f.propTypes={children:p["default"].PropTypes.node,classNames:p["default"].PropTypes.objectOf(p["default"].PropTypes.string),onTrackMouseDown:p["default"].PropTypes.func.isRequired,percentages:p["default"].PropTypes.objectOf(p["default"].PropTypes.number).isRequired},n["default"]=f,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./util":7}],4:[function(e,t,n){"use strict";function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),r=e("./util"),i=function(){function e(t){a(this,e),this.component=t}return o(e,[{key:"valueFromPosition",value:function(e){var t=this.percentageFromPosition(e),n=this.component.props.maxValue-this.component.props.minValue,a=this.component.props.minValue+n*t;return a}},{key:"positionFromValue",value:function(e){var t=this.component.trackClientRect.width,n=this.percentageFromValue(e),a=n*t;return{x:a,y:0}}},{key:"positionFromEvent",value:function(e){var t=this.component.trackClientRect,n=t.width,a=e.touches?e.touches[0]:e,o=a.clientX,i={x:r.clamp(o-t.left,0,n),y:0};return i}},{key:"percentageFromPosition",value:function(e){var t=this.component.trackClientRect.width,n=e.x/t;return n||0}},{key:"percentageFromValue",value:function(e){var t=r.clamp(e,this.component.props.minValue,this.component.props.maxValue),n=this.component.props.maxValue-this.component.props.minValue,a=(t-this.component.props.minValue)/n;return a||0}},{key:"stepValueFromValue",value:function(e){return Math.round(e/this.component.props.step)*this.component.props.step}}]),e}();n["default"]=i,t.exports=n["default"]},{"./util":7}],5:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var a={component:"InputRange",labelContainer:"InputRange-labelContainer",labelMax:"InputRange-label InputRange-label--max",labelMin:"InputRange-label InputRange-label--min",labelValue:"InputRange-label InputRange-label--value",slider:"InputRange-slider",sliderContainer:"InputRange-sliderContainer",trackActive:"InputRange-track InputRange-track--active",trackContainer:"InputRange-track InputRange-track--container"};n["default"]=a,t.exports=n["default"]},{}],6:[function(e,t,n){"use strict";function a(e){return"number"==typeof e}function o(e){var t=e.maxValue,n=e.minValue,o=e.value,i=e.values,u=e.defaultValue,s=e.defaultValues;return i||s||a(o)||a(u)?o||u||r.objectOf(i,a)||r.objectOf(s,a)?n>=t?new Error("`minValue` must be smaller than `maxValue`"):n>=t?new Error("`maxValue` must be larger than `minValue`"):n>o||o>t?new Error("`value` must be within `minValue` and `maxValue`"):void 0:new Error("`values` or `defaultValues` must be an object of numbers"):new Error("`value` or `defaultValue` must be a number")}Object.defineProperty(n,"__esModule",{value:!0}),n.maxMinValuePropType=o;var r=e("./util")},{"./util":7}],7:[function(e,t,n){"use strict";function a(e,t,n){return Math.min(Math.max(e,t),n)}function o(){return Object.assign.apply(Object,arguments)}function r(e,t){return e.indexOf(t)>-1}function i(e,t){var n=Object.keys(e),a={};return n.forEach(function(n){r(t,n)||(a[n]=e[n])}),a}function u(e){return e.charAt(0).toUpperCase()+e.slice(1)}function s(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}function l(e){return"number"==typeof e}function p(e){return e?Array.isArray(e)?0===e.length:0===Object.keys(e).length:!0}function c(e,t){if(!Array.isArray(e))return!1;for(var n=0,a=e.length;a>n;n++)if(!t(e[n]))return!1;return!0}function f(e,t,n){if("object"!=typeof e)return!1;for(var a=n||Object.keys(e),o=0,r=a.length;r>o;o++){var i=a[o];if(!t(e[i]))return!1}return!0}function d(e,t){e.forEach(function(e){t[e]=t[e].bind(t)})}Object.defineProperty(n,"__esModule",{value:!0});var h={arrayOf:c,autobind:d,captialize:u,clamp:a,distanceTo:s,extend:o,isEmpty:p,isNumber:l,objectOf:f,omit:i};n["default"]=h,t.exports=n["default"]},{}],8:[function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(n,"__esModule",{value:!0});var o=e("./InputRange"),r=a(o);n["default"]=r["default"],t.exports=n["default"]},{"./InputRange":1}]},{},[8])(8)});
\ No newline at end of file
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.InputRange=e()}}(function(){return function e(t,n,r){function a(u,i){if(!n[u]){if(!t[u]){var l="function"==typeof require&&require;if(!i&&l)return l(u,!0);if(o)return o(u,!0);var s=new Error("Cannot find module '"+u+"'");throw s.code="MODULE_NOT_FOUND",s}var f=n[u]={exports:{}};t[u][0].call(f.exports,function(e){var n=t[u][1][e];return a(n?n:e)},f,f.exports,e,t,n,r)}return n[u].exports}for(var o="function"==typeof require&&require,u=0;u<r.length;u++)a(r[u]);return a}({1:[function(e,t,n){(function(r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e,t){var n=e.props;return e.isMultiValue?t.min>=n.minValue&&t.max<=n.maxValue&&t.min<t.max:t.max>=n.minValue&&t.max<=n.maxValue}function l(e,t){var n=e.props,r=R["default"].valuesFromProps(e);return _.length(t.min,r.min)>=n.step||_.length(t.max,r.max)>=n.step}function s(e,t){return i(e,t)&&l(e,t)}function f(e){var t=e.props;return t.disabled?t.classNames.component+" is-disabled":t.classNames.component}function p(e,t){return t===e.refs.sliderMin?"min":"max"}function c(e){return e.isMultiValue?["max","min"]:["max"]}function d(e,t){var n=R["default"].valuesFromProps(e),r=R["default"].positionsFromValues(e,n);if(e.isMultiValue){var a=_.distanceTo(t,r.min),o=_.distanceTo(t,r.max);if(o>a)return"min"}return"max"}function m(e){var t=e.props.classNames,n=[],r=c(e),a=R["default"].valuesFromProps(e),o=R["default"].percentagesFromValues(e,a),u=!0,i=!1,l=void 0;try{for(var s,f=r[Symbol.iterator]();!(u=(s=f.next()).done);u=!0){var p=s.value,d=a[p],m=o[p],v="slider"+_.captialize(p),h=e.props,y=h.maxValue,b=h.minValue;"min"===p?y=a.max:b=a.min;var g=w["default"].createElement(M["default"],{classNames:t,key:p,maxValue:y,minValue:b,onSliderKeyDown:e.handleSliderKeyDown,onSliderMouseMove:e.handleSliderMouseMove,percentage:m,ref:v,type:p,value:d});n.push(g)}}catch(O){i=!0,l=O}finally{try{!u&&f["return"]&&f["return"]()}finally{if(i)throw l}}return n}function v(e){var t=[],n=c(e),r=!0,a=!1,o=void 0;try{for(var u,i=n[Symbol.iterator]();!(r=(u=i.next()).done);r=!0){var l=u.value,s=e.isMultiValue?""+e.props.name+_.captialize(l):e.props.name;w["default"].createElement("input",{type:"hidden",name:s})}}catch(f){a=!0,o=f}finally{try{!r&&i["return"]&&i["return"]()}finally{if(a)throw o}}return t}Object.defineProperty(n,"__esModule",{value:!0});var h=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),y=function(e,t,n){for(var r=!0;r;){var a=e,o=t,u=n;i=s=l=void 0,r=!1,null===a&&(a=Function.prototype);var i=Object.getOwnPropertyDescriptor(a,o);if(void 0!==i){if("value"in i)return i.value;var l=i.get;return void 0===l?void 0:l.call(u)}var s=Object.getPrototypeOf(a);if(null===s)return void 0;e=s,t=o,n=u,r=!0}},b="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,w=a(b),g=e("./Slider"),M=a(g),O=e("./Track"),P=a(O),V=e("./Label"),T=a(V),x=e("./defaultClassNames"),k=a(x),j=e("./valueTransformer"),R=a(j),_=e("./util"),E=e("./propTypes"),C={LEFT_ARROW:37,RIGHT_ARROW:39},N=function(e){function t(e){o(this,t),y(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),_.autobind(["handleSliderMouseMove","handleSliderKeyDown","handleTrackMouseDown"],this)}return u(t,e),h(t,[{key:"updatePosition",value:function(e,t){var n=R["default"].valuesFromProps(this),r=R["default"].positionsFromValues(this,n);r[e]=t,this.updatePositions(r)}},{key:"updatePositions",value:function(e){var t={min:R["default"].valueFromPosition(this,e.min),max:R["default"].valueFromPosition(this,e.max)},n={min:R["default"].stepValueFromValue(this,t.min),max:R["default"].stepValueFromValue(this,t.max)};this.updateValues(n)}},{key:"updateValue",value:function(e,t){var n=R["default"].valuesFromProps(this);n[e]=t,this.updateValues(n)}},{key:"updateValues",value:function(e){s(this,e)&&(this.isMultiValue?this.props.onChange(this,e):this.props.onChange(this,e.max))}},{key:"incrementValue",value:function(e){var t=R["default"].valuesFromProps(this),n=t[e]+this.props.step;this.updateValue(e,n)}},{key:"decrementValue",value:function(e){var t=R["default"].valuesFromProps(this),n=t[e]-this.props.step;this.updateValue(e,n)}},{key:"handleSliderMouseMove",value:function(e,t){if(!this.props.disabled){var n=p(this,e),r=R["default"].positionFromEvent(this,t);this.updatePosition(n,r)}}},{key:"handleSliderKeyDown",value:function(e,t){if(!this.props.disabled){var n=p(this,e);switch(t.keyCode){case C.LEFT_ARROW:this.decrementValue(n);break;case C.RIGHT_ARROW:this.incrementValue(n)}}}},{key:"handleTrackMouseDown",value:function(e,t){if(!this.props.disabled){var n=d(this,t);this.updatePosition(n,t)}}},{key:"render",value:function(){var e=this.props.classNames,t=f(this),n=R["default"].valuesFromProps(this),r=R["default"].percentagesFromValues(this,n);return w["default"].createElement("div",{"aria-disabled":this.props.disabled,ref:"inputRange",className:t},w["default"].createElement(T["default"],{className:e.labelMin,containerClassName:e.labelContainer},this.props.minValue),w["default"].createElement(P["default"],{classNames:e,ref:"track",percentages:r,onTrackMouseDown:this.handleTrackMouseDown},m(this)),w["default"].createElement(T["default"],{className:e.labelMax,containerClassName:e.labelContainer},this.props.maxValue),v(this))}},{key:"trackClientRect",get:function(){var e=this.refs.track;return e?e.clientRect:{height:0,left:0,top:0,width:0}}},{key:"isMultiValue",get:function(){return _.isObject(this.props.value)||_.isObject(this.props.defaultValue)}}]),t}(w["default"].Component);N.propTypes={ariaLabelledby:w["default"].PropTypes.string,classNames:w["default"].PropTypes.objectOf(w["default"].PropTypes.string),defaultValue:E.maxMinValuePropType,disabled:w["default"].PropTypes.bool,maxValue:E.maxMinValuePropType,minValue:E.maxMinValuePropType,name:w["default"].PropTypes.string,onChange:w["default"].PropTypes.func.isRequired,step:w["default"].PropTypes.number,value:E.maxMinValuePropType},N.defaultProps={classNames:k["default"],defaultValue:0,disabled:!1,maxValue:10,minValue:0,step:1,value:null},n["default"]=N,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Label":2,"./Slider":3,"./Track":4,"./defaultClassNames":5,"./propTypes":6,"./util":7,"./valueTransformer":8}],2:[function(e,t,n){(function(e){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=function(e,t,n){for(var r=!0;r;){var a=e,o=t,u=n;i=s=l=void 0,r=!1,null===a&&(a=Function.prototype);var i=Object.getOwnPropertyDescriptor(a,o);if(void 0!==i){if("value"in i)return i.value;var l=i.get;return void 0===l?void 0:l.call(u)}var s=Object.getPrototypeOf(a);if(null===s)return void 0;e=s,t=o,n=u,r=!0}},l="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,s=r(l),f=function(e){function t(){a(this,t),i(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return o(t,e),u(t,[{key:"render",value:function(){var e=this.props,t=e.className,n=e.containerClassName;return s["default"].createElement("span",{className:t},s["default"].createElement("span",{className:n},this.props.children))}}]),t}(s["default"].Component);f.propTypes={children:s["default"].PropTypes.node,className:s["default"].PropTypes.string,containerClassName:s["default"].PropTypes.string},n["default"]=f,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],3:[function(e,t,n){(function(r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e){var t=e.refs.slider.ownerDocument;return t}function l(e){var t=100*(e.props.percentage||0),n={position:"absolute",left:t+"%"};return n}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=function(e,t,n){for(var r=!0;r;){var a=e,o=t,u=n;i=s=l=void 0,r=!1,null===a&&(a=Function.prototype);var i=Object.getOwnPropertyDescriptor(a,o);if(void 0!==i){if("value"in i)return i.value;var l=i.get;return void 0===l?void 0:l.call(u)}var s=Object.getPrototypeOf(a);if(null===s)return void 0;e=s,t=o,n=u,r=!0}},p="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,c=a(p),d=e("./Label"),m=a(d),v=e("./util"),h=function(e){function t(e){o(this,t),f(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),v.autobind(["handleClick","handleMouseDown","handleMouseUp","handleMouseMove","handleTouchStart","handleTouchEnd","handleTouchMove","handleKeyDown"],this)}return u(t,e),s(t,[{key:"handleClick",value:function(e){e.preventDefault()}},{key:"handleMouseDown",value:function(){var e=i(this);e.addEventListener("mousemove",this.handleMouseMove),e.addEventListener("mouseup",this.handleMouseUp)}},{key:"handleMouseUp",value:function(){var e=i(this);e.removeEventListener("mousemove",this.handleMouseMove),e.removeEventListener("mouseup",this.handleMouseUp)}},{key:"handleMouseMove",value:function(e){this.props.onSliderMouseMove(this,e)}},{key:"handleTouchStart",value:function(e){var t=i(this);e.preventDefault(),t.addEventListener("touchmove",this.handleTouchMove),t.addEventListener("touchend",this.handleTouchEnd)}},{key:"handleTouchMove",value:function(e){this.props.onSliderMouseMove(this,e)}},{key:"handleTouchEnd",value:function(){var e=i(this);event.preventDefault(),e.removeEventListener("touchmove",this.handleTouchMove),e.removeEventListener("touchend",this.handleTouchEnd)}},{key:"handleKeyDown",value:function(e){this.props.onSliderKeyDown(this,e)}},{key:"render",value:function(){var e=this.props.classNames,t=l(this);return c["default"].createElement("span",{className:e.sliderContainer,ref:"slider",style:t},c["default"].createElement(m["default"],{className:e.labelValue,containerClassName:e.labelContainer},this.props.value),c["default"].createElement("a",{"aria-labelledby":this.props.ariaLabelledby,"aria-valuemax":this.props.maxValue,"aria-valuemin":this.props.minValue,"aria-valuenow":this.props.value,className:e.slider,draggable:"false",href:"#",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,role:"slider"}))}}]),t}(c["default"].Component);h.propTypes={ariaLabelledby:c["default"].PropTypes.string,classNames:c["default"].PropTypes.objectOf(c["default"].PropTypes.string),maxValue:c["default"].PropTypes.number,minValue:c["default"].PropTypes.number,onSliderKeyDown:c["default"].PropTypes.func.isRequired,onSliderMouseMove:c["default"].PropTypes.func.isRequired,percentage:c["default"].PropTypes.number.isRequired,type:c["default"].PropTypes.string.isRequired,value:c["default"].PropTypes.number.isRequired},n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Label":2,"./util":7}],4:[function(e,t,n){(function(r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e){var t=e.props,n=100*(t.percentages.max-t.percentages.min)+"%",r=100*t.percentages.min+"%",a={left:r,width:n};return a}Object.defineProperty(n,"__esModule",{value:!0});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var a=e,o=t,u=n;i=s=l=void 0,r=!1,null===a&&(a=Function.prototype);var i=Object.getOwnPropertyDescriptor(a,o);if(void 0!==i){if("value"in i)return i.value;var l=i.get;return void 0===l?void 0:l.call(u)}var s=Object.getPrototypeOf(a);if(null===s)return void 0;e=s,t=o,n=u,r=!0}},f="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,p=a(f),c=e("./util"),d=function(e){function t(e){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),c.autobind(["handleMouseDown","handleTouchStart"],this)}return u(t,e),l(t,[{key:"handleMouseDown",value:function(e){var t=this.clientRect,n=e.touches?e.touches[0]:e,r=n.clientX,a={x:r-t.left,y:0};this.props.onTrackMouseDown(this,a)}},{key:"handleTouchStart",value:function(e){e.preventDefault(),this.handleMouseDown(e)}},{key:"render",value:function(){var e=i(this),t=this.props.classNames;return p["default"].createElement("div",{className:t.trackContainer,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,ref:"track"},p["default"].createElement("div",{style:e,className:t.trackActive}),this.props.children)}},{key:"clientRect",get:function(){var e=this.refs.track,t=e.getClientRects()[0];return t}}]),t}(p["default"].Component);d.propTypes={children:p["default"].PropTypes.node,classNames:p["default"].PropTypes.objectOf(p["default"].PropTypes.string),onTrackMouseDown:p["default"].PropTypes.func.isRequired,percentages:p["default"].PropTypes.objectOf(p["default"].PropTypes.number).isRequired},n["default"]=d,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./util":7}],5:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r={component:"InputRange",labelContainer:"InputRange-labelContainer",labelMax:"InputRange-label InputRange-label--max",labelMin:"InputRange-label InputRange-label--min",labelValue:"InputRange-label InputRange-label--value",slider:"InputRange-slider",sliderContainer:"InputRange-sliderContainer",trackActive:"InputRange-track InputRange-track--active",trackContainer:"InputRange-track InputRange-track--container"};n["default"]=r,t.exports=n["default"]},{}],6:[function(e,t,n){"use strict";function r(e){var t=e.maxValue,n=e.minValue,r=e.value,o=e.defaultValue,u=a.isNumber(r),i=a.isNumber(o),l=a.objectOf(r,a.isNumber),s=a.objectOf(o,a.isNumber);return void 0===r?new Error("`value` must be defined"):u||i||l||s?n>=t?new Error("`minValue` must be smaller than `maxValue`"):n>=t?new Error("`maxValue` must be larger than `minValue`"):n>r||r>t?new Error("`value` must be within `minValue` and `maxValue`"):void 0:new Error("`value` or `defaultValue` must be a number or an array")}Object.defineProperty(n,"__esModule",{value:!0});var a=e("./util");n.maxMinValuePropType=r},{"./util":7}],7:[function(e,t,n){"use strict";function r(e,t,n){return Math.min(Math.max(e,t),n)}function a(){return Object.assign.apply(Object,arguments)}function o(e,t){return e.indexOf(t)>-1}function u(e,t){var n=Object.keys(e),r={};return n.forEach(function(n){o(t,n)||(r[n]=e[n])}),r}function i(e){return e.charAt(0).toUpperCase()+e.slice(1)}function l(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}function s(e,t){return Math.abs(e-t)}function f(e){return"number"==typeof e}function p(e){return null!==e&&"object"==typeof e}function c(e){return e?Array.isArray(e)?0===e.length:0===Object.keys(e).length:!0}function d(e,t){if(!Array.isArray(e))return!1;for(var n=0,r=e.length;r>n;n++)if(!t(e[n]))return!1;return!0}function m(e,t,n){if(!p(e))return!1;for(var r=n||Object.keys(e),a=0,o=r.length;o>a;a++){var u=r[a];if(!t(e[u]))return!1}return!0}function v(e,t){e.forEach(function(e){t[e]=t[e].bind(t)})}Object.defineProperty(n,"__esModule",{value:!0});var h={arrayOf:d,autobind:v,captialize:i,clamp:r,distanceTo:l,extend:a,isEmpty:c,isNumber:f,isObject:p,length:s,objectOf:m,omit:u};n["default"]=h,t.exports=n["default"]},{}],8:[function(e,t,n){"use strict";function r(e,t){var n=e.trackClientRect.width,r=t.x/n;return r||0}function a(e,t){var n=r(e,t),a=e.props.maxValue-e.props.minValue,o=e.props.minValue+a*n;return o}function o(e){var t=arguments.length<=1||void 0===arguments[1]?e:arguments[1],n=t.props;return function(){if(e.isMultiValue){var t=n.value;return(c.isEmpty(t)||!c.objectOf(t,c.isNumber))&&(t=n.defaultValue),Object.create(t)}var r=c.isNumber(n.value)?n.value:n.defaultValue;return{min:n.minValue,max:r}}()}function u(e,t){var n=c.clamp(t,e.props.minValue,e.props.maxValue),r=e.props.maxValue-e.props.minValue,a=(n-e.props.minValue)/r;return a||0}function i(e,t){var n={min:u(e,t.min),max:u(e,t.max)};return n}function l(e,t){var n=e.trackClientRect.width,r=u(e,t),a=r*n;return{x:a,y:0}}function s(e,t){var n={min:l(e,t.min),max:l(e,t.max)};return n}function f(e,t){var n=e.trackClientRect,r=n.width,a=t.touches?t.touches[0]:t,o=a.clientX,u={x:c.clamp(o-n.left,0,r),y:0};return u}function p(e,t){return Math.round(t/e.props.step)*e.props.step}Object.defineProperty(n,"__esModule",{value:!0});var c=e("./util"),d={percentageFromPosition:r,percentageFromValue:u,percentagesFromValues:i,positionFromEvent:f,positionFromValue:l,positionsFromValues:s,stepValueFromValue:p,valueFromPosition:a,valuesFromProps:o};n["default"]=d,t.exports=n["default"]},{"./util":7}],9:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(n,"__esModule",{value:!0});var a=e("./InputRange"),o=r(a);n["default"]=o["default"],t.exports=n["default"]},{"./InputRange":1}]},{},[9])(9)});
\ No newline at end of file
diff --git a/package.json b/package.json
index 6c14d07..80495f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-input-range",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React component for inputting numeric values within a range",
   "keywords": [
     "react",