react-input-range - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

dist/react-input-range.js

@@ -21,22 +21,26 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.InputRange = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
-var _InputRangeSlider = require('InputRangeSlider');
+var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
 
-var _InputRangeSlider2 = _interopRequireDefault(_InputRangeSlider);
+var _react2 = _interopRequireDefault(_react);
 
-var _InputRangeTrack = require('InputRangeTrack');
+var _Slider = require('./Slider');
 
-var _InputRangeTrack2 = _interopRequireDefault(_InputRangeTrack);
+var _Slider2 = _interopRequireDefault(_Slider);
 
-var _InputRangeValueTransformer = require('InputRangeValueTransformer');
+var _Track = require('./Track');
 
-var _InputRangeValueTransformer2 = _interopRequireDefault(_InputRangeValueTransformer);
+var _Track2 = _interopRequireDefault(_Track);
 
-var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
+var _ValueTransformer = require('./ValueTransformer');
 
-var _react2 = _interopRequireDefault(_react);
+var _ValueTransformer2 = _interopRequireDefault(_ValueTransformer);
 
-var _InputRangeUtil = require('InputRangeUtil');
+var _util = require('./util');
 
-var _InputRangePropType = require('InputRangePropType');
+var _propTypes = require('./propTypes');
 
+var _defaultClassNames = require('./defaultClassNames');
+
+var _defaultClassNames2 = _interopRequireDefault(_defaultClassNames);
+
 function isNewStep(component, value, oldValue) {
@@ -47,3 +51,3 @@ return Math.abs(value - oldValue) >= component.props.step;
 function getKeyBySlider(component, slider) {
-  if (slider === component.refs.inputRangeSliderMin) {
+  if (slider === component.refs.sliderMin) {
     return 'min';
@@ -57,4 +61,4 @@ }
   if (component.isMultiValue) {
-    var distanceToMin = (0, _InputRangeUtil.distanceTo)(position, component.state.positions.min);
-    var distanceToMax = (0, _InputRangeUtil.distanceTo)(position, component.state.positions.max);
+    var distanceToMin = (0, _util.distanceTo)(position, component.state.positions.min);
+    var distanceToMax = (0, _util.distanceTo)(position, component.state.positions.max);
 
@@ -106,6 +110,6 @@ if (distanceToMin < distanceToMax) {
     this.state = state;
-    this.valueTransformer = new _InputRangeValueTransformer2['default'](this);
+    this.valueTransformer = new _ValueTransformer2['default'](this);
     this.isMultiValue = this.props.hasOwnProperty('values');
 
-    (0, _InputRangeUtil.autobind)(['handleSliderMouseMove', 'handleSliderKeyDown', 'handleTrackMouseDown'], this);
+    (0, _util.autobind)(['handleSliderMouseMove', 'handleSliderKeyDown', 'handleTrackMouseDown'], this);
   }
@@ -124,9 +128,17 @@
   }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var currentProps = this.props;
+      var currentState = this.state;
+
+      return currentState.values.min !== nextState.values.min || currentState.values.max !== nextState.values.max || currentState.value !== nextState.value || currentProps.minValue !== nextProps.minValue || currentProps.maxValue !== nextProps.maxValue;
+    }
+  }, {
     key: 'componentWillUpdate',
-    value: function componentWillUpdate() {
+    value: function componentWillUpdate(nextProps, nextState) {
       if (this.props.onChange) {
-        var results = this.state.values.max;
+        var results = nextState.values.max;
 
         if (this.isMultiValue) {
-          results = this.state.values;
+          results = nextState.values;
         }
@@ -178,3 +190,3 @@
       var key = slider && slider.props.type || getKeyByPosition(this, position);
-      var positions = (0, _InputRangeUtil.extend)({}, this.state.positions, _defineProperty({}, key, position));
+      var positions = (0, _util.extend)({}, this.state.positions, _defineProperty({}, key, position));
 
@@ -186,3 +198,3 @@ this.setPositions(positions);
     value: function setPositionByValue(slider, value) {
-      var validValue = (0, _InputRangeUtil.clamp)(value, this.props.minValue, this.props.maxValue);
+      var validValue = (0, _util.clamp)(value, this.props.minValue, this.props.maxValue);
       var position = this.valueTransformer.positionFromValue(validValue);
@@ -196,4 +208,4 @@
       var validValues = {
-        min: (0, _InputRangeUtil.clamp)(values.min, this.props.minValue, this.props.maxValue),
-        max: (0, _InputRangeUtil.clamp)(values.max, this.props.minValue, this.props.maxValue)
+        min: (0, _util.clamp)(values.min, this.props.minValue, this.props.maxValue),
+        max: (0, _util.clamp)(values.max, this.props.minValue, this.props.maxValue)
       };
@@ -214,3 +226,3 @@
       } else {
-        this.setPositionByValue(this.refs.inputRangeSliderMax, props.value);
+        this.setPositionByValue(this.refs.sliderMax, props.value);
       }
@@ -265,2 +277,3 @@ }
     value: function renderSliders() {
+      var classNames = this.props.classNames;
       var sliders = [];
@@ -279,3 +292,3 @@ var keys = getKeys(this);
           var percentage = this.state.percentages[key];
-          var ref = 'inputRangeSlider' + (0, _InputRangeUtil.captialize)(key);
+          var ref = 'slider' + (0, _util.captialize)(key);
 
@@ -292,3 +305,4 @@ var _props = this.props;
 
-          var slider = _react2['default'].createElement(_InputRangeSlider2['default'], {
+          var slider = _react2['default'].createElement(_Slider2['default'], {
+            classNames: classNames,
             key: key,
@@ -337,3 +351,3 @@ maxValue: maxValue,
 
-          var _name = this.isMultiValue ? '' + this.props.name + (0, _InputRangeUtil.captialize)(key) : this.props.name;
+          var _name = this.isMultiValue ? '' + this.props.name + (0, _util.captialize)(key) : this.props.name;
 
@@ -362,11 +376,13 @@ var input = _react2['default'].createElement('input', { type: 'hidden', name: _name });
     value: function render() {
+      var classNames = this.props.classNames;
+
       return _react2['default'].createElement(
         'div',
-        { ref: 'inputRange', className: 'InputRange' },
+        { ref: 'inputRange', className: classNames.component },
         _react2['default'].createElement(
           'span',
-          { className: 'InputRange-label InputRange-label--min' },
+          { className: classNames.labelMin },
           _react2['default'].createElement(
             'span',
-            { className: 'InputRange-labelContainer' },
+            { className: classNames.labelContainer },
             this.props.minValue
@@ -376,5 +392,6 @@ )
         _react2['default'].createElement(
-          _InputRangeTrack2['default'],
+          _Track2['default'],
           {
-            ref: 'inputRangeTrack',
+            classNames: classNames,
+            ref: 'track',
             percentages: this.state.percentages,
@@ -386,6 +403,6 @@ onTrackMouseDown: this.handleTrackMouseDown },
           'span',
-          { className: 'InputRange-label InputRange-label--max' },
+          { className: classNames.labelMax },
           _react2['default'].createElement(
             'span',
-            { className: 'InputRange-labelContainer' },
+            { className: classNames.labelContainer },
             this.props.maxValue
@@ -400,3 +417,3 @@ )
     get: function get() {
-      var track = this.refs.inputRangeTrack;
+      var track = this.refs.track;
 
@@ -412,12 +429,14 @@ return track && track.clientRect;
   ariaLabelledby: _react2['default'].PropTypes.string,
-  maxValue: _InputRangePropType.maxMinValuePropType,
-  minValue: _InputRangePropType.maxMinValuePropType,
+  classNames: _react2['default'].PropTypes.objectOf(_react2['default'].PropTypes.string),
+  maxValue: _propTypes.maxMinValuePropType,
+  minValue: _propTypes.maxMinValuePropType,
   name: _react2['default'].PropTypes.string,
   onChange: _react2['default'].PropTypes.func,
   step: _react2['default'].PropTypes.number,
-  value: _InputRangePropType.maxMinValuePropType,
-  values: _InputRangePropType.maxMinValuePropType
+  value: _propTypes.maxMinValuePropType,
+  values: _propTypes.maxMinValuePropType
 };
 
 InputRange.defaultProps = {
+  classNames: _defaultClassNames2['default'],
   minValue: 0,
@@ -433,44 +452,3 @@ maxValue: 10,
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"InputRangePropType":2,"InputRangeSlider":3,"InputRangeTrack":4,"InputRangeUtil":5,"InputRangeValueTransformer":6}],2:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-exports.maxMinValuePropType = maxMinValuePropType;
-
-var _InputRangeUtil = require('InputRangeUtil');
-
-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;
-
-  if (!numberPredicate(value)) {
-    return new Error('`value` must be a number');
-  }
-
-  if (!value && !(0, _InputRangeUtil.objectOf)(values, numberPredicate)) {
-    return new Error('`values` must be an object of numbers');
-  }
-
-  if (minValue >= maxValue) {
-    return new Error('`minValue` must be smaller than `maxValue`');
-  }
-
-  if (maxValue <= minValue) {
-    return new Error('`maxValue` must be larger than `minValue`');
-  }
-
-  if (value < minValue || value > maxValue) {
-    return new Error('`value` must be within `minValue` and `maxValue`');
-  }
-}
-
-},{"InputRangeUtil":5}],3:[function(require,module,exports){
+},{"./Slider":2,"./Track":3,"./ValueTransformer":4,"./defaultClassNames":5,"./propTypes":6,"./util":7}],2:[function(require,module,exports){
 (function (global){
@@ -497,20 +475,20 @@ 'use strict';
 
-var _InputRangeUtil = require('InputRangeUtil');
+var _util = require('./util');
 
-_react2['default'].initializeTouchEvents(true);
+var Slider = (function (_React$Component) {
+  _inherits(Slider, _React$Component);
 
-var InputRangeSlider = (function (_React$Component) {
-  _inherits(InputRangeSlider, _React$Component);
+  function Slider(props) {
+    _classCallCheck(this, Slider);
 
-  function InputRangeSlider(props) {
-    _classCallCheck(this, InputRangeSlider);
+    _get(Object.getPrototypeOf(Slider.prototype), 'constructor', this).call(this, props);
 
-    _get(Object.getPrototypeOf(InputRangeSlider.prototype), 'constructor', this).call(this, props);
-
     this.state = {};
 
-    (0, _InputRangeUtil.autobind)(['handleClick', 'handleMouseDown', 'handleMouseUp', 'handleMouseMove', 'handleTouchStart', 'handleTouchEnd', 'handleTouchMove', 'handleKeyDown'], this);
+    _react2['default'].initializeTouchEvents(true);
+
+    (0, _util.autobind)(['handleClick', 'handleMouseDown', 'handleMouseUp', 'handleMouseMove', 'handleTouchStart', 'handleTouchEnd', 'handleTouchMove', 'handleKeyDown'], this);
   }
 
-  _createClass(InputRangeSlider, [{
+  _createClass(Slider, [{
     key: 'componentDidMount',
@@ -534,3 +512,3 @@ value: function componentDidMount() {
 
-      var style = (0, _InputRangeUtil.extend)({}, this.state.style, newStyle);
+      var style = (0, _util.extend)({}, this.state.style, newStyle);
 
@@ -598,2 +576,3 @@ this.setState({ style: style });
     value: function render() {
+      var classNames = this.props.classNames;
       var style = this.state.style || {};
@@ -603,9 +582,9 @@
         'span',
-        { className: 'InputRange-sliderContainer', style: style },
+        { className: classNames.sliderContainer, style: style },
         _react2['default'].createElement(
           'span',
-          { className: 'InputRange-label InputRange-label--value' },
+          { className: classNames.labelValue },
           _react2['default'].createElement(
             'span',
-            { className: 'InputRange-labelContainer' },
+            { className: classNames.labelContainer },
             this.props.value
@@ -619,3 +598,3 @@ )
           'aria-valuenow': this.props.value,
-          className: 'InputRange-slider',
+          className: classNames.slider,
           draggable: 'false',
@@ -640,7 +619,8 @@ href: '#',
 
-  return InputRangeSlider;
+  return Slider;
 })(_react2['default'].Component);
 
-InputRangeSlider.propTypes = {
+Slider.propTypes = {
   ariaLabelledby: _react2['default'].PropTypes.string,
+  classNames: _react2['default'].PropTypes.objectOf(_react2['default'].PropTypes.string),
   maxValue: _react2['default'].PropTypes.number,
@@ -655,7 +635,7 @@ minValue: _react2['default'].PropTypes.number,
 
-exports['default'] = InputRangeSlider;
+exports['default'] = Slider;
 module.exports = exports['default'];
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"InputRangeUtil":5}],4:[function(require,module,exports){
+},{"./util":7}],3:[function(require,module,exports){
 (function (global){
@@ -682,20 +662,20 @@ 'use strict';
 
-var _InputRangeUtil = require('InputRangeUtil');
+var _util = require('./util');
 
-_react2['default'].initializeTouchEvents(true);
+var Track = (function (_React$Component) {
+  _inherits(Track, _React$Component);
 
-var InputRangeTrack = (function (_React$Component) {
-  _inherits(InputRangeTrack, _React$Component);
+  function Track(props) {
+    _classCallCheck(this, Track);
 
-  function InputRangeTrack(props) {
-    _classCallCheck(this, InputRangeTrack);
+    _get(Object.getPrototypeOf(Track.prototype), 'constructor', this).call(this, props);
 
-    _get(Object.getPrototypeOf(InputRangeTrack.prototype), 'constructor', this).call(this, props);
-
     this.state = {};
 
-    (0, _InputRangeUtil.autobind)(['handleMouseDown', 'handleTouchStart'], this);
+    _react2['default'].initializeTouchEvents(true);
+
+    (0, _util.autobind)(['handleMouseDown', 'handleTouchStart'], this);
   }
 
-  _createClass(InputRangeTrack, [{
+  _createClass(Track, [{
     key: 'componentDidMount',
@@ -721,3 +701,3 @@ value: function componentDidMount() {
 
-      var activeTrackStyle = (0, _InputRangeUtil.extend)({}, this.state.activeTrackStyle, newActiveTrackStyle);
+      var activeTrackStyle = (0, _util.extend)({}, this.state.activeTrackStyle, newActiveTrackStyle);
 
@@ -753,2 +733,3 @@ this.setState({ activeTrackStyle: activeTrackStyle });
       var activeTrackStyle = this.state.activeTrackStyle || {};
+      var classNames = this.props.classNames;
 
@@ -760,6 +741,6 @@ return _react2['default'].createElement(
           onTouchStart: this.handleTouchStart,
-          className: 'InputRange-track InputRange-track--container' },
+          className: classNames.trackContainer },
         _react2['default'].createElement('div', {
           style: activeTrackStyle,
-          className: 'InputRange-track InputRange-track--active' }),
+          className: classNames.trackActive }),
         this.props.children
@@ -778,7 +759,8 @@ );
 
-  return InputRangeTrack;
+  return Track;
 })(_react2['default'].Component);
 
-InputRangeTrack.propTypes = {
+Track.propTypes = {
   children: _react2['default'].PropTypes.node,
+  classNames: _react2['default'].PropTypes.objectOf(_react2['default'].PropTypes.string),
   onTrackMouseDown: _react2['default'].PropTypes.func.isRequired,
@@ -788,7 +770,7 @@ percentages: _react2['default'].PropTypes.objectOf(_react2['default'].PropTypes.number).isRequired
 
-exports['default'] = InputRangeTrack;
+exports['default'] = Track;
 module.exports = exports['default'];
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"InputRangeUtil":5}],5:[function(require,module,exports){
+},{"./util":7}],4:[function(require,module,exports){
 'use strict';
@@ -799,2 +781,152 @@
 });
+
+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',
+  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'
+};
+
+exports['default'] = defaultClassNames;
+module.exports = exports['default'];
+
+},{}],6:[function(require,module,exports){
+'use strict';
+
+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;
+
+  if (!numberPredicate(value)) {
+    return new Error('`value` must be a number');
+  }
+
+  if (!value && !(0, _util.objectOf)(values, numberPredicate)) {
+    return new Error('`values` must be an object of numbers');
+  }
+
+  if (minValue >= maxValue) {
+    return new Error('`minValue` must be smaller than `maxValue`');
+  }
+
+  if (maxValue <= minValue) {
+    return new Error('`maxValue` must be larger than `minValue`');
+  }
+
+  if (value < minValue || value > maxValue) {
+    return new Error('`value` must be within `minValue` and `maxValue`');
+  }
+}
+
+},{"./util":7}],7:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
 function clamp(value, min, max) {
@@ -858,3 +990,3 @@ return Math.min(Math.max(value, min), max);
 
-var InputRangeUtil = {
+var util = {
   arrayOf: arrayOf,
@@ -870,6 +1002,6 @@ autobind: autobind,
 
-exports['default'] = InputRangeUtil;
+exports['default'] = util;
 module.exports = exports['default'];
 
-},{}],6:[function(require,module,exports){
+},{}],8:[function(require,module,exports){
 'use strict';
@@ -881,84 +1013,12 @@
 
-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 _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'); } }
+var _InputRange = require('./InputRange');
 
-var _InputRangeUtil = require('InputRangeUtil');
+var _InputRange2 = _interopRequireDefault(_InputRange);
 
-var InputRangeValueTransformer = (function () {
-  function InputRangeValueTransformer(component) {
-    _classCallCheck(this, InputRangeValueTransformer);
-
-    this.component = component;
-  }
-
-  _createClass(InputRangeValueTransformer, [{
-    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, _InputRangeUtil.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, _InputRangeUtil.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 InputRangeValueTransformer;
-})();
-
-exports['default'] = InputRangeValueTransformer;
+exports['default'] = _InputRange2['default'];
 module.exports = exports['default'];
 
-},{"InputRangeUtil":5}]},{},[1])(1)
+},{"./InputRange":1}]},{},[8])(8)
 });

dist/react-input-range.min.js

@@ -1,1 +0,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.inputRangeSliderMin?"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=e("InputRangeSlider"),v=o(h),m=e("InputRangeTrack"),y=o(m),b=e("InputRangeValueTransformer"),g=o(b),w="undefined"!=typeof window?window.React:"undefined"!=typeof a?a.React:null,T=o(w),P=e("InputRangeUtil"),M=e("InputRangePropType"),x={LEFT_ARROW:37,RIGHT_ARROW:39},k=function(e){function t(e){i(this,t),d(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e);var n={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("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){this.setPositionsByProps(e)}},{key:"componentWillUpdate",value:function(){if(this.props.onChange){var e=this.state.values.max;this.isMultiValue&&(e=this.state.values),this.props.onChange(this,e)}}},{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){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){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){this.isMultiValue?this.setPositionsByValues(e.values):this.setPositionByValue(this.refs.inputRangeSliderMax,e.value)}},{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){var n=this.valueTransformer.positionFromEvent(t);this.setPosition(e,n)}},{key:"handleSliderKeyDown",value:function(e,t){switch(t.keyCode){case x.LEFT_ARROW:this.decrementValue(e);break;case x.RIGHT_ARROW:this.incrementValue(e)}}},{key:"handleTrackMouseDown",value:function(e,t){this.setPosition(null,t)}},{key:"renderSliders",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.state.values[u],l=this.state.percentages[u],p="inputRangeSlider"+P.captialize(u),f=this.props,d=f.maxValue,h=f.minValue;"min"===u?d=this.state.values.max:h=this.state.values.min;var m=T["default"].createElement(v["default"],{key:u,maxValue:d,minValue:h,onSliderKeyDown:this.handleSliderKeyDown,onSliderMouseMove:this.handleSliderMouseMove,percentage:l,ref:p,type:u,value:s});e.push(m)}}catch(y){a=!0,o=y}finally{try{!n&&i["return"]&&i["return"]()}finally{if(a)throw o}}return e}},{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;T["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(){return T["default"].createElement("div",{ref:"inputRange",className:"InputRange"},T["default"].createElement("span",{className:"InputRange-label InputRange-label--min"},T["default"].createElement("span",{className:"InputRange-labelContainer"},this.props.minValue)),T["default"].createElement(y["default"],{ref:"inputRangeTrack",percentages:this.state.percentages,onTrackMouseDown:this.handleTrackMouseDown},this.renderSliders()),T["default"].createElement("span",{className:"InputRange-label InputRange-label--max"},T["default"].createElement("span",{className:"InputRange-labelContainer"},this.props.maxValue)),this.renderHiddenInputs())}},{key:"trackClientRect",get:function(){var e=this.refs.inputRangeTrack;return e&&e.clientRect}}]),t}(T["default"].Component);k.propTypes={ariaLabelledby:T["default"].PropTypes.string,maxValue:M.maxMinValuePropType,minValue:M.maxMinValuePropType,name:T["default"].PropTypes.string,onChange:T["default"].PropTypes.func,step:T["default"].PropTypes.number,value:M.maxMinValuePropType,values:M.maxMinValuePropType},k.defaultProps={minValue:0,maxValue:10,value:0,step:1},n["default"]=k,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{InputRangePropType:2,InputRangeSlider:3,InputRangeTrack:4,InputRangeUtil:5,InputRangeValueTransformer:6}],2:[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;return a(o)?o||r.objectOf(i,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` must be an object of numbers"):new Error("`value` must be a number")}Object.defineProperty(n,"__esModule",{value:!0}),n.maxMinValuePropType=o;var r=e("InputRangeUtil")},{InputRangeUtil:5}],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("InputRangeUtil");p["default"].initializeTouchEvents(!0);var f=function(e){function t(e){r(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={},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.state.style||{};return p["default"].createElement("span",{className:"InputRange-sliderContainer",style:e},p["default"].createElement("span",{className:"InputRange-label InputRange-label--value"},p["default"].createElement("span",{className:"InputRange-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:"InputRange-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,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:{})},{InputRangeUtil:5}],4:[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("InputRangeUtil");p["default"].initializeTouchEvents(!0);var f=function(e){function t(e){r(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={},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||{};return p["default"].createElement("div",{onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,className:"InputRange-track InputRange-track--container"},p["default"].createElement("div",{style:e,className:"InputRange-track InputRange-track--active"}),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,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:{})},{InputRangeUtil:5}],5:[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){return e.charAt(0).toUpperCase()+e.slice(1)}function i(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}function u(e){return"number"==typeof e}function s(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 l(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 p(e,t){e.forEach(function(e){t[e]=t[e].bind(t)})}Object.defineProperty(n,"__esModule",{value:!0});var c={arrayOf:s,autobind:p,captialize:r,clamp:a,distanceTo:i,extend:o,isNumber:u,objectOf:l};n["default"]=c,t.exports=n["default"]},{}],6:[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("InputRangeUtil"),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"]},{InputRangeUtil:5}]},{},[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 c=n[i]={exports:{}};t[i][0].call(c.exports,function(e){var n=t[i][1][e];return o(n?n:e)},c,c.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 c(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 p(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"),x=e("./propTypes"),M=e("./defaultClassNames"),k=o(M),V={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={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("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){this.setPositionsByProps(e)}},{key:"shouldComponentUpdate",value:function(e,t){var n=this.props,a=this.state;return a.values.min!==t.values.min||a.values.max!==t.values.max||a.value!==t.value||n.minValue!==e.minValue||n.maxValue!==e.maxValue}},{key:"componentWillUpdate",value:function(e,t){if(this.props.onChange){var n=t.values.max;this.isMultiValue&&(n=t.values),this.props.onChange(this,n)}}},{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||c(this,t),a=P.extend({},this.state.positions,r({},n,t));this.setPositions(a)}},{key:"setPositionByValue",value:function(e,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){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){this.isMultiValue?this.setPositionsByValues(e.values):this.setPositionByValue(this.refs.sliderMax,e.value)}},{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){var n=this.valueTransformer.positionFromEvent(t);this.setPosition(e,n)}},{key:"handleSliderKeyDown",value:function(e,t){switch(t.keyCode){case V.LEFT_ARROW:this.decrementValue(e);break;case V.RIGHT_ARROW:this.incrementValue(e)}}},{key:"handleTrackMouseDown",value:function(e,t){this.setPosition(null,t)}},{key:"renderSliders",value:function(){var e=this.props.classNames,t=[],n=p(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],c=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:c,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=p(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;return m["default"].createElement("div",{ref:"inputRange",className:e.component},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),maxValue:x.maxMinValuePropType,minValue:x.maxMinValuePropType,name:m["default"].PropTypes.string,onChange:m["default"].PropTypes.func,step:m["default"].PropTypes.number,value:x.maxMinValuePropType,values:x.maxMinValuePropType},O.defaultProps={classNames:k["default"],minValue:0,maxValue:10,value:0,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,c=o(l),p=e("./util"),f=function(e){function t(e){r(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={},c["default"].initializeTouchEvents(!0),p.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=p.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 c["default"].createElement("span",{className:e.sliderContainer,style:t},c["default"].createElement("span",{className:e.labelValue},c["default"].createElement("span",{className: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"}))}},{key:"document",get:function(){var e=c["default"].findDOMNode(this),t=e.ownerDocument;return t}}]),t}(c["default"].Component);f.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"]=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,c=o(l),p=e("./util"),f=function(e){function t(e){r(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={},c["default"].initializeTouchEvents(!0),p.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=p.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 c["default"].createElement("div",{onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,className:t.trackContainer},c["default"].createElement("div",{style:e,className:t.trackActive}),this.props.children)}},{key:"clientRect",get:function(){var e=c["default"].findDOMNode(this),t=e.getClientRects()[0];return t}}]),t}(c["default"].Component);f.propTypes={children:c["default"].PropTypes.node,classNames:c["default"].PropTypes.objectOf(c["default"].PropTypes.string),onTrackMouseDown:c["default"].PropTypes.func.isRequired,percentages:c["default"].PropTypes.objectOf(c["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;return a(o)?o||r.objectOf(i,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` must be an object of numbers"):new Error("`value` 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){return e.charAt(0).toUpperCase()+e.slice(1)}function i(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}function u(e){return"number"==typeof e}function s(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 l(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 c(e,t){e.forEach(function(e){t[e]=t[e].bind(t)})}Object.defineProperty(n,"__esModule",{value:!0});var p={arrayOf:s,autobind:c,captialize:r,clamp:a,distanceTo:i,extend:o,isNumber:u,objectOf:l};n["default"]=p,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)});

package.json

 {
   "name": "react-input-range",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "React component for inputting numeric values within a range",
@@ -19,3 +19,3 @@ "keywords": [
   },
-  "main": "dist/react-input-range.js",
+  "main": "lib/InputRange/index.js",
   "author": "David Chin",
@@ -35,3 +35,3 @@ "license": "MIT",
     "gulp": "^3.9.0",
-    "gulp-babel": "^5.1.0",
+    "gulp-babel": "^5.2.1",
     "gulp-bump": "^1.0.0",
@@ -77,13 +77,11 @@ "gulp-concat": "^2.6.0",
   },
-  "files": [
-    "dist/",
-    "LICENSE",
-    "README.md"
-  ],
   "scripts": {
     "build": "gulp build",
+    "build:dist": "gulp build:dist",
+    "build:lib": "gulp build:lib",
     "release": "gulp release",
     "start": "gulp run",
-    "test": "gulp test"
+    "test": "gulp test",
+    "prepublish": "npm run build:lib"
   }
 }

README.md

@@ -11,4 +11,4 @@ # react-input-range
 1. Install `react-input-range` using npm. `npm install react-input-range`
-2. Import `react-input-range.css` to apply the default styling.
-3. Import `react-input-range.js` to use `InputRange` component.
+2. Import `react-input-range` to use `InputRange` component.
+3. Optionally, import `react-input-range.css` if you want to apply the default styling.
 4. Depending on your browser support requirement, `babel-core/polyfill` or `core-js/es6` polyfill might be needed.
@@ -50,15 +50,26 @@
 ### Options
-Property                | Type            | Description
-:-----------------------|:----------------|:----------------------------------
-ariaLabelledby          |string           |`aria-labelledby` attribute
-maxValue                |number           |Maximum value it can accept
-minValue                |number           |Minimum value it can accept
-name                    |string           |Name of `form` input
-onChange                |Function         |`onChange` callback
-step                    |number           |Increment/decrement value
-value                   |number           |Default value
-values                  |Array.\<number\> |Default range of values
+Property                | Type                    | Description
+:-----------------------|:------------------------|:----------------------------------
+ariaLabelledby          |string                   |`aria-labelledby` attribute
+classNames              |Object.&lt;string&gt;    |CSS class names
+maxValue                |number                   |Maximum value it can accept
+minValue                |number                   |Minimum value it can accept
+name                    |string                   |Name of `form` input
+onChange                |Function                 |`onChange` callback
+step                    |number                   |Increment/decrement value
+value                   |number                   |Default value
+values                  |Array.&lt;number&gt;     |Default range of values
 
 ## Development
 
-Run with `npm start`
+If you want to work on this project locally, you need to grab all of its dependencies.
+```
+npm install && bundle install
+```
+
+After that, you should be able run
+```
+npm start
+```
+
+Contributions are welcome. :)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98140

increased by65.23%

Number of package files

21

increased by200%

Lines of code

1699

increased by103.72%

Number of lines in readme file

74

increased by17.46%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes