update build

Author: nikolas

build/RangeStepInput.js

@@ -20,18 +20,21 @@ export default class RangeStepInput extends React.Component {
     this.onMouseDown = this.onMouseDown.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
     this.onMouseMove = this.onMouseMove.bind(this);
+    this.domRef = React.createRef();
   }
 
   render() {
     return React.createElement("input", {
       type: "range",
+      ref: this.domRef,
       className: this.props.className,
       min: this.props.min,
       max: this.props.max,
       step: this.props.step,
       value: this.props.value,
       name: this.props.name,
       id: this.props.id,
+      disabled: this.props.disabled,
       onChange: this.props.onChange,
       onMouseDown: this.onMouseDown,
       onMouseUp: this.onMouseUp,
@@ -45,13 +48,26 @@ export default class RangeStepInput extends React.Component {
     this.setState({
       isMouseDown: true
     });
+
+    if (this.props.hold) {
+      const oldVal = this.props.value;
+      const self = this; // Add some initial delay on the click-hold functionality.
+
+      setTimeout(function () {
+        self.holdLoop = self.makeHoldLoop(oldVal);
+      }, 600);
+    }
   }
 
   onMouseUp() {
     this.setState({
       isMouseDown: false,
       isDragging: false
     });
+
+    if (this.holdLoop) {
+      clearInterval(this.holdLoop);
+    }
   }
 
   onMouseMove() {
@@ -74,7 +90,47 @@ export default class RangeStepInput extends React.Component {
     }
   }
 
+  makeHoldLoop(oldVal) {
+    const self = this;
+    return setInterval(function () {
+      if (!self.state.isMouseDown) {
+        // The user isn't holding the cursor anymore: clean up
+        // and cancel.
+        if (self.holdLoop) {
+          clearInterval(self.holdLoop);
+        }
+
+        return false;
+      }
+
+      const input = self.domRef.current;
+      let newVal = self.props.value;
+
+      if (oldVal > newVal) {
+        newVal -= self.props.step;
+      } else if (oldVal < newVal) {
+        newVal += self.props.step;
+      } else {
+        // The user is just holding the cursor at the current
+        // value, so don't do anything.
+        return false;
+      } // Directly setting input.value will cause the new value
+      // to not be recognized, because of React.
+      // https://stackoverflow.com/a/46012210/173630
+
+
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+      nativeInputValueSetter.call(input, newVal); // Trigger an onChange event.
+
+      const e = new Event('change', {
+        bubbles: true
+      });
+      return input.dispatchEvent(e);
+    }, 100);
+  }
+
 }
+;
 RangeStepInput.propTypes = {
   value: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired,
@@ -83,5 +139,12 @@ RangeStepInput.propTypes = {
   min: PropTypes.number,
   max: PropTypes.number,
   id: PropTypes.string,
-  name: PropTypes.string
+  name: PropTypes.string,
+  disabled: PropTypes.bool,
+  // Determines whether the slider changes value when the cursor is
+  // held on it.
+  hold: PropTypes.bool
+};
+RangeStepInput.defaultProps = {
+  hold: true
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-range-step-input",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "An <input type=range> that steps up and down on click.",
   "main": "build/index.js",
   "scripts": {