rheostat - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -1,3 +0,16 @@
-# v1.0.0
+# Change Log
 
-* Initial release
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+
+## [1.1.0] - 2016-06-22
+
+### Added
+
+- New prop for disabling the slider.
+
+## [1.0.0] - 2016-01-21
+
+Initial Release

lib/algorithms/linear.js

@@ -0,1 +1,3 @@
+"use strict";
+
 Object.defineProperty(exports, "__esModule", {
@@ -5,18 +7,24 @@ value: true
 exports["default"] = {
-  getPosition: function (value, min, max) {
-    return (value - min) / (max - min) * 100;
-  },
+  getPosition: function () {
+    function getPosition(value, min, max) {
+      return (value - min) / (max - min) * 100;
+    }
 
-  getValue: function (pos, min, max) {
-    var decimal = pos / 100;
+    return getPosition;
+  }(),
+  getValue: function () {
+    function getValue(pos, min, max) {
+      var decimal = pos / 100;
 
-    if (pos === 0) {
-      return min;
-    } else if (pos === 100) {
-      return max;
+      if (pos === 0) {
+        return min;
+      } else if (pos === 100) {
+        return max;
+      }
+
+      return Math.round((max - min) * decimal + min);
     }
 
-    return Math.round((max - min) * decimal + min);
-  }
-};
-module.exports = exports["default"];
+    return getValue;
+  }()
+};

lib/algorithms/log10.js

@@ -0,1 +1,3 @@
+"use strict";
+
 Object.defineProperty(exports, "__esModule", {
@@ -5,27 +7,33 @@ value: true
 exports["default"] = {
-  getPosition: function (value, min, max) {
-    var minv = Math.log(min);
-    var maxv = Math.log(max);
+  getPosition: function () {
+    function getPosition(value, min, max) {
+      var minv = Math.log(min);
+      var maxv = Math.log(max);
 
-    var scale = (maxv - minv) / 100;
+      var scale = (maxv - minv) / 100;
 
-    return (Math.log(value) - minv) / scale;
-  },
+      return (Math.log(value) - minv) / scale;
+    }
 
-  getValue: function (positionPercent, min, max) {
-    var minv = Math.log(min);
-    var maxv = Math.log(max);
+    return getPosition;
+  }(),
+  getValue: function () {
+    function getValue(positionPercent, min, max) {
+      var minv = Math.log(min);
+      var maxv = Math.log(max);
 
-    if (positionPercent === 0) {
-      return min;
-    } else if (positionPercent === 100) {
-      return max;
+      if (positionPercent === 0) {
+        return min;
+      } else if (positionPercent === 100) {
+        return max;
+      }
+
+      // calculate adjustment factor
+      var scale = (maxv - minv) / 100;
+
+      return Math.floor(Math.exp(minv + scale * positionPercent)) || 0;
     }
 
-    // calculate adjustment factor
-    var scale = (maxv - minv) / 100;
-
-    return Math.floor(Math.exp(minv + scale * positionPercent)) || 0;
-  }
-};
-module.exports = exports["default"];
+    return getValue;
+  }()
+};

lib/constants/SliderConstants.js

@@ -0,5 +1,7 @@
+"use strict";
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var KEYS = {
+var KEYS = exports.KEYS = {
   END: 35,
@@ -13,6 +15,3 @@ ESC: 27,
 };
-exports.KEYS = KEYS;
-var PERCENT_EMPTY = 0;
-exports.PERCENT_EMPTY = PERCENT_EMPTY;
-var PERCENT_FULL = 100;
-exports.PERCENT_FULL = PERCENT_FULL;
+var PERCENT_EMPTY = exports.PERCENT_EMPTY = 0;
+var PERCENT_FULL = exports.PERCENT_FULL = 100;

lib/Slider.js

@@ -1,22 +0,24 @@
-Object.defineProperty(exports, '__esModule', {
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _SliderConstants = require('./constants/SliderConstants');
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+var SliderConstants = _interopRequireWildcard(_SliderConstants);
 
-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; }
+var _react = require('react');
 
-var _constantsSliderConstants = require('./constants/SliderConstants');
+var _react2 = _interopRequireDefault(_react);
 
-var SliderConstants = _interopRequireWildcard(_constantsSliderConstants);
+var _linear = require('./algorithms/linear');
 
-var _react = require('react');
+var _linear2 = _interopRequireDefault(_linear);
 
-var _react2 = _interopRequireDefault(_react);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var _algorithmsLinear = require('./algorithms/linear');
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
 
-var _algorithmsLinear2 = _interopRequireDefault(_algorithmsLinear);
+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; }
 
@@ -38,2 +40,4 @@ // istanbul ignore next
 exports['default'] = _react2['default'].createClass({
+  displayName: 'Slider',
+
   propTypes: {
@@ -49,2 +53,4 @@ // the algorithm to use
     className: _react.PropTypes.string,
+    // prevent the slider from moving when clicked
+    disabled: _react.PropTypes.bool,
     // a custom handle you can pass in
@@ -90,567 +96,728 @@ handle: PropTypeReactComponent,
   getDefaultProps: function () {
-    return {
-      algorithm: _algorithmsLinear2['default'],
-      className: '',
-      handle: 'div',
-      handleTabIndexStart: 1,
-      max: SliderConstants.PERCENT_FULL,
-      min: SliderConstants.PERCENT_EMPTY,
-      orientation: 'horizontal',
-      pitPoints: [],
-      progressBar: 'div',
-      snap: false,
-      snapPoints: [],
-      values: [SliderConstants.PERCENT_EMPTY]
-    };
-  },
+    function getDefaultProps() {
+      return {
+        algorithm: _linear2['default'],
+        className: '',
+        disabled: false,
+        handle: 'div',
+        handleTabIndexStart: 1,
+        max: SliderConstants.PERCENT_FULL,
+        min: SliderConstants.PERCENT_EMPTY,
+        orientation: 'horizontal',
+        pitPoints: [],
+        progressBar: 'div',
+        snap: false,
+        snapPoints: [],
+        values: [SliderConstants.PERCENT_EMPTY]
+      };
+    }
 
+    return getDefaultProps;
+  }(),
   getInitialState: function () {
-    var _this = this;
+    function getInitialState() {
+      var _this = this;
 
-    var _props = this.props;
-    var max = _props.max;
-    var min = _props.min;
-    var values = _props.values;
+      var _props = this.props;
+      var max = _props.max;
+      var min = _props.min;
+      var values = _props.values;
 
-    return {
-      className: getClassName(this.props),
-      handlePos: values.map(function (value) {
-        return _this.props.algorithm.getPosition(value, min, max);
-      }),
-      handleDimensions: 0,
-      mousePos: null,
-      sliderBox: {},
-      slidingIndex: null,
-      values: values
-    };
-  },
 
-  componentWillReceiveProps: function (nextProps) {
-    var minMaxChanged = nextProps.min !== this.props.min || nextProps.max !== this.props.max;
+      return {
+        className: getClassName(this.props),
+        handlePos: values.map(function (value) {
+          return _this.props.algorithm.getPosition(value, min, max);
+        }),
+        handleDimensions: 0,
+        mousePos: null,
+        sliderBox: {},
+        slidingIndex: null,
+        values: values
+      };
+    }
 
-    var valuesChanged = this.state.values.length !== nextProps.values.length || this.state.values.some(function (value, idx) {
-      return nextProps.values[idx] !== value;
-    });
+    return getInitialState;
+  }(),
+  componentWillReceiveProps: function () {
+    function componentWillReceiveProps(nextProps) {
+      var minMaxChanged = nextProps.min !== this.props.min || nextProps.max !== this.props.max;
 
-    var orientationChanged = nextProps.className !== this.props.className || nextProps.orientation !== this.props.orientation;
+      var valuesChanged = this.state.values.length !== nextProps.values.length || this.state.values.some(function (value, idx) {
+        return nextProps.values[idx] !== value;
+      });
 
-    if (orientationChanged) {
-      this.setState({
-        className: getClassName(nextProps)
-      });
+      var orientationChanged = nextProps.className !== this.props.className || nextProps.orientation !== this.props.orientation;
+
+      var willBeDisabled = nextProps.disabled && !this.props.disabled;
+
+      if (orientationChanged) {
+        this.setState({
+          className: getClassName(nextProps)
+        });
+      }
+
+      if (minMaxChanged || valuesChanged) this.updateNewValues(nextProps);
+
+      if (willBeDisabled && this.state.slidingIndex !== null) {
+        this.endSlide();
+      }
     }
 
-    if (minMaxChanged || valuesChanged) this.updateNewValues(nextProps);
-  },
-
+    return componentWillReceiveProps;
+  }(),
   getPublicState: function () {
-    return {
-      max: this.props.max,
-      min: this.props.min,
-      values: this.state.values
-    };
-  },
+    function getPublicState() {
+      return {
+        max: this.props.max,
+        min: this.props.min,
+        values: this.state.values
+      };
+    }
 
+    return getPublicState;
+  }(),
+
+
   // istanbul ignore next
   getSliderBoundingBox: function () {
-    var node = getDOMNode(this.refs.rheostat);
-    var rect = node.getBoundingClientRect();
+    function getSliderBoundingBox() {
+      var node = getDOMNode(this.refs.rheostat);
+      var rect = node.getBoundingClientRect();
 
-    return {
-      height: rect.height || node.clientHeight,
-      left: rect.left,
-      top: rect.top,
-      width: rect.width || node.clientWidth
-    };
-  },
+      return {
+        height: rect.height || node.clientHeight,
+        left: rect.left,
+        top: rect.top,
+        width: rect.width || node.clientWidth
+      };
+    }
 
-  getHandleFor: function (ev) {
-    return Number(ev.currentTarget.getAttribute('data-handle-key'));
-  },
+    return getSliderBoundingBox;
+  }(),
+  getHandleFor: function () {
+    function getHandleFor(ev) {
+      return Number(ev.currentTarget.getAttribute('data-handle-key'));
+    }
 
-  getProgressStyle: function (idx) {
-    var handlePos = this.state.handlePos;
+    return getHandleFor;
+  }(),
+  getProgressStyle: function () {
+    function getProgressStyle(idx) {
+      var handlePos = this.state.handlePos;
 
-    var value = handlePos[idx];
 
-    if (idx === 0) {
-      return this.props.orientation === 'vertical' ? { height: value + '%', top: 0 } : { left: 0, width: value + '%' };
+      var value = handlePos[idx];
+
+      if (idx === 0) {
+        return this.props.orientation === 'vertical' ? { height: String(value) + '%', top: 0 } : { left: 0, width: String(value) + '%' };
+      }
+
+      var prevValue = handlePos[idx - 1];
+      var diffValue = value - prevValue;
+
+      return this.props.orientation === 'vertical' ? { height: diffValue + '%', top: String(prevValue) + '%' } : { left: String(prevValue) + '%', width: diffValue + '%' };
     }
 
-    var prevValue = handlePos[idx - 1];
-    var diffValue = value - prevValue;
+    return getProgressStyle;
+  }(),
+  getMinValue: function () {
+    function getMinValue(idx) {
+      return this.state.values[idx - 1] ? Math.max(this.props.min, this.state.values[idx - 1]) : this.props.min;
+    }
 
-    return this.props.orientation === 'vertical' ? { height: diffValue + '%', top: prevValue + '%' } : { left: prevValue + '%', width: diffValue + '%' };
-  },
+    return getMinValue;
+  }(),
+  getMaxValue: function () {
+    function getMaxValue(idx) {
+      return this.state.values[idx + 1] ? Math.min(this.props.max, this.state.values[idx + 1]) : this.props.max;
+    }
 
-  getMinValue: function (idx) {
-    return this.state.values[idx - 1] ? Math.max(this.props.min, this.state.values[idx - 1]) : this.props.min;
-  },
+    return getMaxValue;
+  }(),
 
-  getMaxValue: function (idx) {
-    return this.state.values[idx + 1] ? Math.min(this.props.max, this.state.values[idx + 1]) : this.props.max;
-  },
 
   // istanbul ignore next
-  getHandleDimensions: function (ev, sliderBox) {
-    var handleNode = ev.currentTarget || null;
+  getHandleDimensions: function () {
+    function getHandleDimensions(ev, sliderBox) {
+      var handleNode = ev.currentTarget || null;
 
-    if (!handleNode) return 0;
+      if (!handleNode) return 0;
 
-    return this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * SliderConstants.PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * SliderConstants.PERCENT_FULL / 2;
-  },
+      return this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * SliderConstants.PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * SliderConstants.PERCENT_FULL / 2;
+    }
 
-  getClosestSnapPoint: function (value) {
-    if (!this.props.snapPoints.length) return value;
+    return getHandleDimensions;
+  }(),
+  getClosestSnapPoint: function () {
+    function getClosestSnapPoint(value) {
+      if (!this.props.snapPoints.length) return value;
 
-    return this.props.snapPoints.reduce(function (snapTo, snap) {
-      return Math.abs(snapTo - value) < Math.abs(snap - value) ? snapTo : snap;
-    });
-  },
+      return this.props.snapPoints.reduce(function (snapTo, snap) {
+        return Math.abs(snapTo - value) < Math.abs(snap - value) ? snapTo : snap;
+      });
+    }
 
-  getSnapPosition: function (positionPercent) {
-    if (!this.props.snap) return positionPercent;
+    return getClosestSnapPoint;
+  }(),
+  getSnapPosition: function () {
+    function getSnapPosition(positionPercent) {
+      if (!this.props.snap) return positionPercent;
 
-    var _props2 = this.props;
-    var algorithm = _props2.algorithm;
-    var max = _props2.max;
-    var min = _props2.min;
+      var _props2 = this.props;
+      var algorithm = _props2.algorithm;
+      var max = _props2.max;
+      var min = _props2.min;
 
-    var value = algorithm.getValue(positionPercent, min, max);
 
-    var snapValue = this.getClosestSnapPoint(value);
+      var value = algorithm.getValue(positionPercent, min, max);
 
-    return algorithm.getPosition(snapValue, min, max);
-  },
+      var snapValue = this.getClosestSnapPoint(value);
 
-  getNextPositionForKey: function (idx, keyCode) {
-    var _stepMultiplier;
+      return algorithm.getPosition(snapValue, min, max);
+    }
 
-    var _state = this.state;
-    var handlePos = _state.handlePos;
-    var values = _state.values;
-    var _props3 = this.props;
-    var algorithm = _props3.algorithm;
-    var max = _props3.max;
-    var min = _props3.min;
-    var snapPoints = _props3.snapPoints;
+    return getSnapPosition;
+  }(),
+  getNextPositionForKey: function () {
+    function getNextPositionForKey(idx, keyCode) {
+      var _stepMultiplier;
 
-    var shouldSnap = this.props.snap;
+      var _state = this.state;
+      var handlePos = _state.handlePos;
+      var values = _state.values;
+      var _props3 = this.props;
+      var algorithm = _props3.algorithm;
+      var max = _props3.max;
+      var min = _props3.min;
+      var snapPoints = _props3.snapPoints;
 
-    var proposedValue = values[idx];
-    var proposedPercentage = handlePos[idx];
-    var originalPercentage = proposedPercentage;
-    var stepValue = 1;
 
-    if (max >= 100) {
-      proposedPercentage = Math.round(proposedPercentage);
-    } else {
-      stepValue = 100 / (max - min);
-    }
+      var shouldSnap = this.props.snap;
 
-    var currentIndex = null;
+      var proposedValue = values[idx];
+      var proposedPercentage = handlePos[idx];
+      var originalPercentage = proposedPercentage;
+      var stepValue = 1;
 
-    if (shouldSnap) {
-      currentIndex = snapPoints.indexOf(this.getClosestSnapPoint(values[idx]));
-    }
+      if (max >= 100) {
+        proposedPercentage = Math.round(proposedPercentage);
+      } else {
+        stepValue = 100 / (max - min);
+      }
 
-    var stepMultiplier = (_stepMultiplier = {}, _defineProperty(_stepMultiplier, SliderConstants.KEYS.LEFT, function (v) {
-      return v * -1;
-    }), _defineProperty(_stepMultiplier, SliderConstants.KEYS.RIGHT, function (v) {
-      return v * 1;
-    }), _defineProperty(_stepMultiplier, SliderConstants.KEYS.PAGE_DOWN, function (v) {
-      return v > 1 ? -v : v * -10;
-    }), _defineProperty(_stepMultiplier, SliderConstants.KEYS.PAGE_UP, function (v) {
-      return v > 1 ? v : v * 10;
-    }), _stepMultiplier);
+      var currentIndex = null;
 
-    if (stepMultiplier.hasOwnProperty(keyCode)) {
-      proposedPercentage += stepMultiplier[keyCode](stepValue);
-
       if (shouldSnap) {
-        if (proposedPercentage > originalPercentage) {
-          // move cursor right unless overflow
-          if (currentIndex < snapPoints.length - 1) {
-            proposedValue = snapPoints[currentIndex + 1];
-          }
-          // move cursor left unless there is overflow
-        } else if (currentIndex > 0) {
-            proposedValue = snapPoints[currentIndex - 1];
-          }
+        currentIndex = snapPoints.indexOf(this.getClosestSnapPoint(values[idx]));
       }
-    } else if (keyCode === SliderConstants.KEYS.HOME) {
-      proposedPercentage = SliderConstants.PERCENT_EMPTY;
 
-      if (shouldSnap) {
-        proposedValue = snapPoints[0];
+      var stepMultiplier = (_stepMultiplier = {}, _defineProperty(_stepMultiplier, SliderConstants.KEYS.LEFT, function (v) {
+        return v * -1;
+      }), _defineProperty(_stepMultiplier, SliderConstants.KEYS.RIGHT, function (v) {
+        return v * 1;
+      }), _defineProperty(_stepMultiplier, SliderConstants.KEYS.PAGE_DOWN, function (v) {
+        return v > 1 ? -v : v * -10;
+      }), _defineProperty(_stepMultiplier, SliderConstants.KEYS.PAGE_UP, function (v) {
+        return v > 1 ? v : v * 10;
+      }), _stepMultiplier);
+
+      if (stepMultiplier.hasOwnProperty(keyCode)) {
+        proposedPercentage += stepMultiplier[keyCode](stepValue);
+
+        if (shouldSnap) {
+          if (proposedPercentage > originalPercentage) {
+            // move cursor right unless overflow
+            if (currentIndex < snapPoints.length - 1) {
+              proposedValue = snapPoints[currentIndex + 1];
+            }
+            // move cursor left unless there is overflow
+          } else if (currentIndex > 0) {
+              proposedValue = snapPoints[currentIndex - 1];
+            }
+        }
+      } else if (keyCode === SliderConstants.KEYS.HOME) {
+        proposedPercentage = SliderConstants.PERCENT_EMPTY;
+
+        if (shouldSnap) {
+          proposedValue = snapPoints[0];
+        }
+      } else if (keyCode === SliderConstants.KEYS.END) {
+        proposedPercentage = SliderConstants.PERCENT_FULL;
+
+        if (shouldSnap) {
+          proposedValue = snapPoints[snapPoints.length - 1];
+        }
+      } else {
+        return null;
       }
-    } else if (keyCode === SliderConstants.KEYS.END) {
-      proposedPercentage = SliderConstants.PERCENT_FULL;
 
-      if (shouldSnap) {
-        proposedValue = snapPoints[snapPoints.length - 1];
-      }
-    } else {
-      return null;
+      return shouldSnap ? algorithm.getPosition(proposedValue, min, max) : proposedPercentage;
     }
 
-    return shouldSnap ? algorithm.getPosition(proposedValue, min, max) : proposedPercentage;
-  },
+    return getNextPositionForKey;
+  }(),
+  getNextState: function () {
+    function getNextState(idx, proposedPosition) {
+      var _this2 = this;
 
-  getNextState: function (idx, proposedPosition) {
-    var _this2 = this;
+      var handlePos = this.state.handlePos;
+      var _props4 = this.props;
+      var max = _props4.max;
+      var min = _props4.min;
 
-    var handlePos = this.state.handlePos;
-    var _props4 = this.props;
-    var max = _props4.max;
-    var min = _props4.min;
 
-    var actualPosition = this.validatePosition(idx, proposedPosition);
+      var actualPosition = this.validatePosition(idx, proposedPosition);
 
-    var nextHandlePos = handlePos.map(function (pos, index) {
-      return index === idx ? actualPosition : pos;
-    });
+      var nextHandlePos = handlePos.map(function (pos, index) {
+        return index === idx ? actualPosition : pos;
+      });
 
-    return {
-      handlePos: nextHandlePos,
-      values: nextHandlePos.map(function (pos) {
-        return _this2.props.algorithm.getValue(pos, min, max);
-      })
-    };
-  },
+      return {
+        handlePos: nextHandlePos,
+        values: nextHandlePos.map(function (pos) {
+          return _this2.props.algorithm.getValue(pos, min, max);
+        })
+      };
+    }
 
-  getClosestHandle: function (positionPercent) {
-    var handlePos = this.state.handlePos;
+    return getNextState;
+  }(),
+  getClosestHandle: function () {
+    function getClosestHandle(positionPercent) {
+      var handlePos = this.state.handlePos;
 
-    return handlePos.reduce(function (closestIdx, node, idx) {
-      var challenger = Math.abs(handlePos[idx] - positionPercent);
-      var current = Math.abs(handlePos[closestIdx] - positionPercent);
-      return challenger < current ? idx : closestIdx;
-    }, 0);
-  },
 
+      return handlePos.reduce(function (closestIdx, node, idx) {
+        var challenger = Math.abs(handlePos[idx] - positionPercent);
+        var current = Math.abs(handlePos[closestIdx] - positionPercent);
+        return challenger < current ? idx : closestIdx;
+      }, 0);
+    }
+
+    return getClosestHandle;
+  }(),
+
+
   // istanbul ignore next
-  setStartSlide: function (ev, x, y) {
-    var sliderBox = this.getSliderBoundingBox();
+  setStartSlide: function () {
+    function setStartSlide(ev, x, y) {
+      var sliderBox = this.getSliderBoundingBox();
 
-    this.setState({
-      handleDimensions: this.getHandleDimensions(ev, sliderBox),
-      mousePos: { x: x, y: y },
-      sliderBox: sliderBox,
-      slidingIndex: this.getHandleFor(ev)
-    });
-  },
+      this.setState({
+        handleDimensions: this.getHandleDimensions(ev, sliderBox),
+        mousePos: { x: x, y: y },
+        sliderBox: sliderBox,
+        slidingIndex: this.getHandleFor(ev)
+      });
+    }
 
+    return setStartSlide;
+  }(),
+
+
   // istanbul ignore next
-  startMouseSlide: function (ev) {
-    this.setStartSlide(ev, ev.clientX, ev.clientY);
+  startMouseSlide: function () {
+    function startMouseSlide(ev) {
+      this.setStartSlide(ev, ev.clientX, ev.clientY);
 
-    if (typeof document.addEventListener === 'function') {
-      document.addEventListener('mousemove', this.handleMouseSlide, false);
-      document.addEventListener('mouseup', this.endSlide, false);
-    } else {
-      document.attachEvent('onmousemove', this.handleMouseSlide);
-      document.attachEvent('onmouseup', this.endSlide);
+      if (typeof document.addEventListener === 'function') {
+        document.addEventListener('mousemove', this.handleMouseSlide, false);
+        document.addEventListener('mouseup', this.endSlide, false);
+      } else {
+        document.attachEvent('onmousemove', this.handleMouseSlide);
+        document.attachEvent('onmouseup', this.endSlide);
+      }
+
+      this.killEvent(ev);
     }
 
-    return this.killEvent(ev);
-  },
+    return startMouseSlide;
+  }(),
 
+
   // istanbul ignore next
-  startTouchSlide: function (ev) {
-    if (ev.changedTouches.length > 1) return;
+  startTouchSlide: function () {
+    function startTouchSlide(ev) {
+      if (ev.changedTouches.length > 1) return;
 
-    var touch = ev.changedTouches[0];
+      var touch = ev.changedTouches[0];
 
-    this.setStartSlide(ev, touch.clientX, touch.clientY);
+      this.setStartSlide(ev, touch.clientX, touch.clientY);
 
-    document.addEventListener('touchmove', this.handleTouchSlide, false);
-    document.addEventListener('touchend', this.endSlide, false);
+      document.addEventListener('touchmove', this.handleTouchSlide, false);
+      document.addEventListener('touchend', this.endSlide, false);
 
-    if (this.props.onSliderDragStart) this.props.onSliderDragStart();
+      if (this.props.onSliderDragStart) this.props.onSliderDragStart();
 
-    this.killEvent(ev);
-  },
+      this.killEvent(ev);
+    }
 
+    return startTouchSlide;
+  }(),
+
+
   // istanbul ignore next
-  handleMouseSlide: function (ev) {
-    if (this.state.slidingIndex === null) return;
-    this.handleSlide(ev.clientX, ev.clientY);
-    this.killEvent(ev);
-  },
+  handleMouseSlide: function () {
+    function handleMouseSlide(ev) {
+      if (this.state.slidingIndex === null) return;
+      this.handleSlide(ev.clientX, ev.clientY);
+      this.killEvent(ev);
+    }
 
+    return handleMouseSlide;
+  }(),
+
+
   // istanbul ignore next
-  handleTouchSlide: function (ev) {
-    if (this.state.slidingIndex === null) return;
+  handleTouchSlide: function () {
+    function handleTouchSlide(ev) {
+      if (this.state.slidingIndex === null) return;
 
-    if (ev.changedTouches.length > 1) {
-      this.endSlide();
-      return;
+      if (ev.changedTouches.length > 1) {
+        this.endSlide();
+        return;
+      }
+
+      var touch = ev.changedTouches[0];
+
+      this.handleSlide(touch.clientX, touch.clientY);
+      this.killEvent(ev);
     }
 
-    var touch = ev.changedTouches[0];
+    return handleTouchSlide;
+  }(),
 
-    this.handleSlide(touch.clientX, touch.clientY);
-    this.killEvent(ev);
-  },
 
   // istanbul ignore next
-  handleSlide: function (x, y) {
-    var _state2 = this.state;
-    var idx = _state2.slidingIndex;
-    var sliderBox = _state2.sliderBox;
+  handleSlide: function () {
+    function handleSlide(x, y) {
+      var _state2 = this.state;
+      var idx = _state2.slidingIndex;
+      var sliderBox = _state2.sliderBox;
 
-    var positionPercent = this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * SliderConstants.PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * SliderConstants.PERCENT_FULL;
 
-    this.slideTo(idx, positionPercent);
+      var positionPercent = this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * SliderConstants.PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * SliderConstants.PERCENT_FULL;
 
-    if (this.canMove(idx, positionPercent)) {
-      // update mouse positions
-      this.setState({ x: x, y: y });
-      if (this.props.onSliderDragMove) this.props.onSliderDragMove();
+      this.slideTo(idx, positionPercent);
+
+      if (this.canMove(idx, positionPercent)) {
+        // update mouse positions
+        this.setState({ x: x, y: y });
+        if (this.props.onSliderDragMove) this.props.onSliderDragMove();
+      }
     }
-  },
 
+    return handleSlide;
+  }(),
+
+
   // istanbul ignore next
   endSlide: function () {
-    var _this3 = this;
+    function endSlide() {
+      var _this3 = this;
 
-    var idx = this.state.slidingIndex;
+      var idx = this.state.slidingIndex;
 
-    this.setState({ slidingIndex: -1 });
+      this.setState({ slidingIndex: -1 });
 
-    if (typeof document.removeEventListener === 'function') {
-      document.removeEventListener('mouseup', this.endSlide, false);
-      document.removeEventListener('touchend', this.endSlide, false);
-      document.removeEventListener('touchmove', this.handleTouchSlide, false);
-      document.removeEventListener('mousemove', this.handleMouseSlide, false);
-    } else {
-      document.detachEvent('onmousemove', this.handleMouseSlide);
-      document.detachEvent('onmouseup', this.endSlide);
-    }
+      if (typeof document.removeEventListener === 'function') {
+        document.removeEventListener('mouseup', this.endSlide, false);
+        document.removeEventListener('touchend', this.endSlide, false);
+        document.removeEventListener('touchmove', this.handleTouchSlide, false);
+        document.removeEventListener('mousemove', this.handleMouseSlide, false);
+      } else {
+        document.detachEvent('onmousemove', this.handleMouseSlide);
+        document.detachEvent('onmouseup', this.endSlide);
+      }
 
-    if (this.props.onSliderDragEnd) this.props.onSliderDragEnd();
-    if (this.props.snap) {
-      var positionPercent = this.getSnapPosition(this.state.handlePos[idx]);
-      this.slideTo(idx, positionPercent, function () {
-        return _this3.fireChangeEvent();
-      });
-    } else {
-      this.fireChangeEvent();
+      if (this.props.onSliderDragEnd) this.props.onSliderDragEnd();
+      if (this.props.snap) {
+        var positionPercent = this.getSnapPosition(this.state.handlePos[idx]);
+        this.slideTo(idx, positionPercent, function () {
+          return _this3.fireChangeEvent();
+        });
+      } else {
+        this.fireChangeEvent();
+      }
     }
-  },
 
+    return endSlide;
+  }(),
+
+
   // istanbul ignore next
-  handleClick: function (ev) {
-    var _this4 = this;
+  handleClick: function () {
+    function handleClick(ev) {
+      var _this4 = this;
 
-    // if we're coming off of the end of a slide don't handle the click also
-    if (this.state.slidingIndex === -1) {
-      this.setState({ slidingIndex: null });
-      return;
-    }
+      // if we're coming off of the end of a slide don't handle the click also
+      if (this.state.slidingIndex === -1) {
+        this.setState({ slidingIndex: null });
+        return;
+      }
 
-    if (ev.target.getAttribute('data-handle-key')) {
-      return;
-    }
+      if (ev.target.getAttribute('data-handle-key')) {
+        return;
+      }
 
-    // Calculate the position of the slider on the page so we can determine
-    // the position where you click in relativity.
-    var sliderBox = this.getSliderBoundingBox();
+      // Calculate the position of the slider on the page so we can determine
+      // the position where you click in relativity.
+      var sliderBox = this.getSliderBoundingBox();
 
-    var positionDecimal = this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
+      var positionDecimal = this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
 
-    var positionPercent = positionDecimal * SliderConstants.PERCENT_FULL;
+      var positionPercent = positionDecimal * SliderConstants.PERCENT_FULL;
 
-    var handleId = this.getClosestHandle(positionPercent);
+      var handleId = this.getClosestHandle(positionPercent);
 
-    var validPositionPercent = this.getSnapPosition(positionPercent);
+      var validPositionPercent = this.getSnapPosition(positionPercent);
 
-    // Move the handle there
-    this.slideTo(handleId, validPositionPercent, function () {
-      return _this4.fireChangeEvent();
-    });
+      // Move the handle there
+      this.slideTo(handleId, validPositionPercent, function () {
+        return _this4.fireChangeEvent();
+      });
 
-    if (this.props.onClick) this.props.onClick();
-  },
+      if (this.props.onClick) this.props.onClick();
+    }
 
+    return handleClick;
+  }(),
+
+
   // istanbul ignore next
-  handleKeydown: function (ev) {
-    var _this5 = this;
+  handleKeydown: function () {
+    function handleKeydown(ev) {
+      var _this5 = this;
 
-    var idx = this.getHandleFor(ev);
+      var idx = this.getHandleFor(ev);
 
-    if (ev.keyCode === SliderConstants.KEYS.ESC) {
-      ev.currentTarget.blur();
-      return;
-    }
+      if (ev.keyCode === SliderConstants.KEYS.ESC) {
+        ev.currentTarget.blur();
+        return;
+      }
 
-    var proposedPercentage = this.getNextPositionForKey(idx, ev.keyCode);
+      var proposedPercentage = this.getNextPositionForKey(idx, ev.keyCode);
 
-    if (proposedPercentage === null) return;
+      if (proposedPercentage === null) return;
 
-    if (this.canMove(idx, proposedPercentage)) {
-      this.slideTo(idx, proposedPercentage, function () {
-        return _this5.fireChangeEvent();
-      });
-      if (this.props.onKeyPress) this.props.onKeyPress();
+      if (this.canMove(idx, proposedPercentage)) {
+        this.slideTo(idx, proposedPercentage, function () {
+          return _this5.fireChangeEvent();
+        });
+        if (this.props.onKeyPress) this.props.onKeyPress();
+      }
+
+      this.killEvent(ev);
+      return;
     }
 
-    this.killEvent(ev);
-    return;
-  },
+    return handleKeydown;
+  }(),
 
+
   // Make sure the proposed position respects the bounds and
   // does not collide with other handles too much.
-  validatePosition: function (idx, proposedPosition) {
-    var _state3 = this.state;
-    var handlePos = _state3.handlePos;
-    var handleDimensions = _state3.handleDimensions;
+  validatePosition: function () {
+    function validatePosition(idx, proposedPosition) {
+      var _state3 = this.state;
+      var handlePos = _state3.handlePos;
+      var handleDimensions = _state3.handleDimensions;
 
-    return Math.max(Math.min(proposedPosition, handlePos[idx + 1] !== undefined ? handlePos[idx + 1] - handleDimensions : SliderConstants.PERCENT_FULL // 100% is the highest value
-    ), handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : SliderConstants.PERCENT_EMPTY // 0% is the lowest value
-    );
-  },
 
-  validateValues: function (proposedValues, props) {
-    var _ref = props || this.props;
+      return Math.max(Math.min(proposedPosition, handlePos[idx + 1] !== undefined ? handlePos[idx + 1] - handleDimensions : SliderConstants.PERCENT_FULL // 100% is the highest value
+      ), handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : SliderConstants.PERCENT_EMPTY // 0% is the lowest value
+      );
+    }
 
-    var max = _ref.max;
-    var min = _ref.min;
+    return validatePosition;
+  }(),
+  validateValues: function () {
+    function validateValues(proposedValues, props) {
+      var _ref = props || this.props;
 
-    return proposedValues.map(function (value, idx, values) {
-      var realValue = Math.max(Math.min(value, max), min);
+      var max = _ref.max;
+      var min = _ref.min;
 
-      if (values.length && realValue < values[idx - 1]) {
-        return values[idx - 1];
-      }
 
-      return realValue;
-    });
-  },
+      return proposedValues.map(function (value, idx, values) {
+        var realValue = Math.max(Math.min(value, max), min);
 
+        if (values.length && realValue < values[idx - 1]) {
+          return values[idx - 1];
+        }
+
+        return realValue;
+      });
+    }
+
+    return validateValues;
+  }(),
+
+
   // Can we move the slider to the given position?
-  canMove: function (idx, proposedPosition) {
-    var _state4 = this.state;
-    var handlePos = _state4.handlePos;
-    var handleDimensions = _state4.handleDimensions;
+  canMove: function () {
+    function canMove(idx, proposedPosition) {
+      var _state4 = this.state;
+      var handlePos = _state4.handlePos;
+      var handleDimensions = _state4.handleDimensions;
 
-    if (proposedPosition < SliderConstants.PERCENT_EMPTY) return false;
-    if (proposedPosition > SliderConstants.PERCENT_FULL) return false;
 
-    var nextHandlePosition = handlePos[idx + 1] !== undefined ? handlePos[idx + 1] - handleDimensions : Infinity;
+      if (proposedPosition < SliderConstants.PERCENT_EMPTY) return false;
+      if (proposedPosition > SliderConstants.PERCENT_FULL) return false;
 
-    if (proposedPosition > nextHandlePosition) return false;
+      var nextHandlePosition = handlePos[idx + 1] !== undefined ? handlePos[idx + 1] - handleDimensions : Infinity;
 
-    var prevHandlePosition = handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : -Infinity;
+      if (proposedPosition > nextHandlePosition) return false;
 
-    if (proposedPosition < prevHandlePosition) return false;
+      var prevHandlePosition = handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : -Infinity;
 
-    return true;
-  },
+      if (proposedPosition < prevHandlePosition) return false;
 
+      return true;
+    }
+
+    return canMove;
+  }(),
+
+
   // istanbul ignore next
   fireChangeEvent: function () {
-    if (this.props.onChange) this.props.onChange(this.getPublicState());
-  },
+    function fireChangeEvent() {
+      if (this.props.onChange) this.props.onChange(this.getPublicState());
+    }
 
+    return fireChangeEvent;
+  }(),
+
+
   // istanbul ignore next
-  slideTo: function (idx, proposedPosition, onAfterSet) {
-    var _this6 = this;
+  slideTo: function () {
+    function slideTo(idx, proposedPosition, onAfterSet) {
+      var _this6 = this;
 
-    var nextState = this.getNextState(idx, proposedPosition);
+      var nextState = this.getNextState(idx, proposedPosition);
 
-    this.setState(nextState, function () {
-      if (_this6.props.onValuesUpdated) _this6.props.onValuesUpdated(_this6.getPublicState());
-      if (onAfterSet) onAfterSet();
-    });
-  },
+      this.setState(nextState, function () {
+        if (_this6.props.onValuesUpdated) _this6.props.onValuesUpdated(_this6.getPublicState());
+        if (onAfterSet) onAfterSet();
+      });
+    }
 
+    return slideTo;
+  }(),
+
+
   // istanbul ignore next
-  updateNewValues: function (nextProps) {
-    var _this7 = this;
+  updateNewValues: function () {
+    function updateNewValues(nextProps) {
+      var _this7 = this;
 
-    // Don't update while the slider is sliding
-    if (this.state.slidingIndex !== null) {
-      return;
-    }
+      // Don't update while the slider is sliding
+      if (this.state.slidingIndex !== null) {
+        return;
+      }
 
-    var max = nextProps.max;
-    var min = nextProps.min;
-    var values = nextProps.values;
+      var max = nextProps.max;
+      var min = nextProps.min;
+      var values = nextProps.values;
 
-    var nextValues = this.validateValues(values, nextProps);
 
-    this.setState({
-      handlePos: nextValues.map(function (value) {
-        return _this7.props.algorithm.getPosition(value, min, max);
-      }),
-      values: nextValues
-    }, function () {
-      return _this7.fireChangeEvent();
-    });
-  },
+      var nextValues = this.validateValues(values, nextProps);
 
-  killEvent: function (ev) {
-    ev.stopPropagation();
-    ev.preventDefault();
-    ev.cancelBubble = true;
-    ev.returnValue = false;
-  },
+      this.setState({
+        handlePos: nextValues.map(function (value) {
+          return _this7.props.algorithm.getPosition(value, min, max);
+        }),
+        values: nextValues
+      }, function () {
+        return _this7.fireChangeEvent();
+      });
+    }
 
+    return updateNewValues;
+  }(),
+  killEvent: function () {
+    function killEvent(ev) {
+      ev.stopPropagation();
+      ev.preventDefault();
+      ev.cancelBubble = true;
+      ev.returnValue = false;
+    }
+
+    return killEvent;
+  }(),
   render: function () {
-    var _this8 = this;
+    function render() {
+      var _this8 = this;
 
-    return _react2['default'].createElement(
-      'div',
-      {
-        className: this.state.className,
-        ref: 'rheostat',
-        onClick: this.handleClick,
-        style: { position: 'relative' }
-      },
-      _react2['default'].createElement('div', { className: 'rheostat-background' }),
-      this.state.handlePos.map(function (pos, idx) {
-        var handleStyle = _this8.props.orientation === 'vertical' ? { top: pos + '%', position: 'absolute' } : { left: pos + '%', position: 'absolute' };
+      var _props5 = this.props;
+      var algorithm = _props5.algorithm;
+      var children = _props5.children;
+      var disabled = _props5.disabled;
+      var Handle = _props5.handle;
+      var handleTabIndexStart = _props5.handleTabIndexStart;
+      var max = _props5.max;
+      var min = _props5.min;
+      var orientation = _props5.orientation;
+      var PitComponent = _props5.pitComponent;
+      var pitPoints = _props5.pitPoints;
+      var ProgressBar = _props5.progressBar;
 
-        return _react2['default'].createElement(_this8.props.handle, {
-          'aria-valuemax': _this8.getMaxValue(idx),
-          'aria-valuemin': _this8.getMinValue(idx),
-          'aria-valuenow': _this8.state.values[idx],
-          'data-handle-key': idx,
-          className: 'rheostat-handle',
-          key: idx,
-          onKeyDown: _this8.handleKeydown,
-          onMouseDown: _this8.startMouseSlide,
-          onTouchStart: _this8.startTouchSlide,
-          role: 'slider',
-          style: handleStyle,
-          tabIndex: _this8.props.handleTabIndexStart + idx
-        });
-      }),
-      this.state.handlePos.map(function (node, idx, arr) {
-        if (idx === 0 && arr.length > 1) {
-          return null;
-        }
 
-        return _react2['default'].createElement(_this8.props.progressBar, {
-          className: 'rheostat-progress',
-          key: idx,
-          style: _this8.getProgressStyle(idx)
-        });
-      }),
-      this.props.pitComponent && this.props.pitPoints.map(function (n) {
-        var pos = _this8.props.algorithm.getPosition(n, _this8.props.min, _this8.props.max);
-        var pitStyle = _this8.props.orientation === 'vertical' ? { top: pos + '%', position: 'absolute' } : { left: pos + '%', position: 'absolute' };
+      return _react2['default'].createElement(
+        'div',
+        {
+          className: this.state.className,
+          ref: 'rheostat',
+          onClick: !disabled && this.handleClick,
+          style: { position: 'relative' }
+        },
+        _react2['default'].createElement('div', { className: 'rheostat-background' }),
+        this.state.handlePos.map(function (pos, idx) {
+          var handleStyle = orientation === 'vertical' ? { top: String(pos) + '%', position: 'absolute' } : { left: String(pos) + '%', position: 'absolute' };
 
-        return _react2['default'].createElement(
-          _this8.props.pitComponent,
-          { key: n, style: pitStyle },
-          n
-        );
-      }),
-      this.props.children
-    );
-  }
-});
-module.exports = exports['default'];
+          return _react2['default'].createElement(Handle, {
+            'aria-valuemax': _this8.getMaxValue(idx),
+            'aria-valuemin': _this8.getMinValue(idx),
+            'aria-valuenow': _this8.state.values[idx],
+            'aria-disabled': disabled,
+            'data-handle-key': idx,
+            className: 'rheostat-handle',
+            key: idx,
+            onKeyDown: !disabled && _this8.handleKeydown,
+            onMouseDown: !disabled && _this8.startMouseSlide,
+            onTouchStart: !disabled && _this8.startTouchSlide,
+            role: 'slider',
+            style: handleStyle,
+            tabIndex: handleTabIndexStart + idx
+          });
+        }),
+        this.state.handlePos.map(function (node, idx, arr) {
+          if (idx === 0 && arr.length > 1) {
+            return null;
+          }
+
+          return _react2['default'].createElement(ProgressBar, {
+            className: 'rheostat-progress',
+            key: idx,
+            style: _this8.getProgressStyle(idx)
+          });
+        }),
+        PitComponent && pitPoints.map(function (n) {
+          var pos = algorithm.getPosition(n, min, max);
+          var pitStyle = orientation === 'vertical' ? { top: String(pos) + '%', position: 'absolute' } : { left: String(pos) + '%', position: 'absolute' };
+
+          return _react2['default'].createElement(
+            PitComponent,
+            { key: n, style: pitStyle },
+            n
+          );
+        }),
+        children
+      );
+    }
+
+    return render;
+  }()
+});

package.json

 {
   "name": "rheostat",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Rheostat is a www, mobile, and accessible slider component built with React",
@@ -10,5 +10,5 @@ "main": "lib/Slider.js",
     "clean": "rimraf lib",
-    "playground": "node devServer.js",
     "prepublish": "npm run build",
     "lint": "eslint src/Slider.jsx src/utils/*.js",
+    "storybook": "start-storybook -p 9001",
     "test": "npm run lint && npm run test:coverage",
@@ -25,10 +25,7 @@ "test:coverage": "babel-node node_modules/.bin/babel-istanbul cover node_modules/.bin/_mocha -- -R tap test/*-test.js",
   "devDependencies": {
-    "alt": "^0.17.9",
-    "babel": "^5.8.34",
-    "babel-core": "^5.8.34",
-    "babel-loader": "^5.4.0",
+    "@kadira/storybook": "^1.26.0",
+    "babel-cli": "^6.9.0",
+    "babel-istanbul": "^0.8.0",
     "babel-preset-airbnb": "^1.0.1",
     "chai": "^3.4.1",
-    "cosmos-js": "^0.7.0",
-    "coveralls": "^2.11.4",
     "enzyme": "^1.3.1",
@@ -38,13 +35,10 @@ "eslint": "^1.8.0",
     "eslint-plugin-react": "^3.7.1",
-    "express": "^4.13.3",
-    "istanbul": "^0.4.0",
     "mocha": "^2.3.3",
+    "raw-loader": "^0.5.1",
     "react": "^0.14.3",
-    "react-addons-test-utils": "^0.14.3",
+    "react-addons-test-utils": "^0.14.8",
     "react-dom": "^0.14.3",
     "rimraf": "^2.3.2",
     "sinon": "^1.17.2",
-    "webpack": "^1.12.8",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.5.0"
+    "style-loader": "^0.13.1"
   },
@@ -51,0 +45,0 @@ "peerDependencies": {

README.md

@@ -5,2 +5,4 @@ # Rheostat
 
+![Rheostat demo](sample.gif)
+
 ## Install
@@ -93,5 +95,11 @@
 
+You can disable the slider to prevent the user from moving it.
+
+```js
+  disabled: PropTypes.bool
+```
+
 ## Usage
 
-> Important: Make sure to include the [css file](slider.css) or feel free to create your own.
+> Important: Make sure to include the [css file](css/slider.css) or feel free to create your own.
 
@@ -122,7 +130,7 @@ * Simple.
 
-For more examples you can check out the live playground.
+For more examples you can check out the storybook.
 
 * Clone this repo on your machine.
 * `npm install`
-* `npm run playground`
-* Visit `http://localhost:8989/`.
+* `npm run storybook`
+* Visit `http://localhost:9001/`.

src/Slider.jsx

@@ -32,2 +32,4 @@ import * as SliderConstants from './constants/SliderConstants';
     className: PropTypes.string,
+    // prevent the slider from moving when clicked
+    disabled: PropTypes.bool,
     // a custom handle you can pass in
@@ -76,2 +78,3 @@ handle: PropTypeReactComponent,
       className: '',
+      disabled: false,
       handle: 'div',
@@ -127,2 +130,4 @@ handleTabIndexStart: 1,
 
+    const willBeDisabled = nextProps.disabled && !this.props.disabled;
+
     if (orientationChanged) {
@@ -135,2 +140,6 @@ this.setState({
     if (minMaxChanged || valuesChanged) this.updateNewValues(nextProps);
+
+    if (willBeDisabled && this.state.slidingIndex !== null) {
+      this.endSlide();
+    }
   },
@@ -342,3 +351,3 @@
 
-    return this.killEvent(ev);
+    this.killEvent(ev);
   },
@@ -580,2 +589,16 @@
   render() {
+    const {
+      algorithm,
+      children,
+      disabled,
+      handle: Handle,
+      handleTabIndexStart,
+      max,
+      min,
+      orientation,
+      pitComponent: PitComponent,
+      pitPoints,
+      progressBar: ProgressBar,
+    } = this.props;
+
     return (
@@ -585,3 +608,3 @@ <div
         ref="rheostat"
-        onClick={this.handleClick}
+        onClick={!disabled && this.handleClick}
         style={{ position: 'relative' }}
@@ -591,3 +614,3 @@ >
         {this.state.handlePos.map((pos, idx) => {
-          const handleStyle = this.props.orientation === 'vertical'
+          const handleStyle = orientation === 'vertical'
             ? { top: `${pos}%`, position: 'absolute' }
@@ -597,15 +620,16 @@ : { left: `${pos}%`, position: 'absolute' };
           return (
-            <this.props.handle
+            <Handle
               aria-valuemax={this.getMaxValue(idx)}
               aria-valuemin={this.getMinValue(idx)}
               aria-valuenow={this.state.values[idx]}
+              aria-disabled={disabled}
               data-handle-key={idx}
               className="rheostat-handle"
               key={idx}
-              onKeyDown={this.handleKeydown}
-              onMouseDown={this.startMouseSlide}
-              onTouchStart={this.startTouchSlide}
+              onKeyDown={!disabled && this.handleKeydown}
+              onMouseDown={!disabled && this.startMouseSlide}
+              onTouchStart={!disabled && this.startTouchSlide}
               role="slider"
               style={handleStyle}
-              tabIndex={this.props.handleTabIndexStart + idx}
+              tabIndex={handleTabIndexStart + idx}
             />
@@ -620,3 +644,3 @@ );
           return (
-            <this.props.progressBar
+            <ProgressBar
               className="rheostat-progress"
@@ -628,5 +652,5 @@ key={idx}
         })}
-        {this.props.pitComponent && this.props.pitPoints.map((n) => {
-          const pos = this.props.algorithm.getPosition(n, this.props.min, this.props.max);
-          const pitStyle = this.props.orientation === 'vertical'
+        {PitComponent && pitPoints.map((n) => {
+          const pos = algorithm.getPosition(n, min, max);
+          const pitStyle = orientation === 'vertical'
             ? { top: `${pos}%`, position: 'absolute' }
@@ -636,6 +660,6 @@ : { left: `${pos}%`, position: 'absolute' };
           return (
-            <this.props.pitComponent key={n} style={pitStyle}>{n}</this.props.pitComponent>
+            <PitComponent key={n} style={pitStyle}>{n}</PitComponent>
           );
         })}
-        {this.props.children}
+        {children}
       </div>
@@ -642,0 +666,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

707606

increased by820.81%

Dev dependency count

17

decreased by-26.09%

Number of lines in readme file

134

increased by6.35%

Worsened metrics

Number of package files

24

decreased by-36.84%

Lines of code

2022

decreased by-0.88%

No dependency changes