Add support for changing the slider value using up and down also

Call event.preventDefault() to prevent unwanted scrolling.

Author: esseb

src/InputRange/InputRange.js

@@ -22,8 +22,10 @@ const internals = new WeakMap();
  * @const {Object.<string, number>}
  */
 const KeyCode = {
+  DOWN_ARROW: 40,
   LEFT_ARROW: 37,
   RIGHT_ARROW: 39,
+  UP_ARROW: 38,
 };
 
 /**
@@ -393,10 +395,14 @@ export default class InputRange extends React.Component {
 
     switch (event.keyCode) {
     case KeyCode.LEFT_ARROW:
+    case KeyCode.DOWN_ARROW:
+      event.preventDefault();
       this.decrementValue(key);
       break;
 
     case KeyCode.RIGHT_ARROW:
+    case KeyCode.UP_ARROW:
+      event.preventDefault();
       this.incrementValue(key);
       break;
 

test/InputRange.spec.js

@@ -219,6 +219,7 @@ describe('InputRange', () => {
         slider = inputRange.refs.sliderMax;
         event = {
           keyCode: 37,
+          preventDefault: jasmine.createSpy('preventDefault'),
         };
       });
 
@@ -228,6 +229,44 @@ describe('InputRange', () => {
         expect(inputRange.decrementValue).toHaveBeenCalledWith('max');
       });
 
+      it('should call event.preventDefault()', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(event.preventDefault).toHaveBeenCalledWith();
+      });
+
+      it('should not decrement value if disabled', () => {
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+        spyOn(inputRange, 'decrementValue');
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(inputRange.decrementValue).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when pressing down arrow key', () => {
+      beforeEach(() => {
+        spyOn(inputRange, 'decrementValue');
+
+        slider = inputRange.refs.sliderMax;
+        event = {
+          keyCode: 40,
+          preventDefault: jasmine.createSpy('preventDefault'),
+        };
+      });
+
+      it('should decrement value', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(inputRange.decrementValue).toHaveBeenCalledWith('max');
+      });
+
+      it('should call event.preventDefault()', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(event.preventDefault).toHaveBeenCalledWith();
+      });
+
       it('should not decrement value if disabled', () => {
         inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
         spyOn(inputRange, 'decrementValue');
@@ -244,6 +283,7 @@ describe('InputRange', () => {
         slider = inputRange.refs.sliderMax;
         event = {
           keyCode: 39,
+          preventDefault: jasmine.createSpy('preventDefault'),
         };
       });
 
@@ -253,6 +293,44 @@ describe('InputRange', () => {
         expect(inputRange.incrementValue).toHaveBeenCalledWith('max');
       });
 
+      it('should call event.preventDefault()', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(event.preventDefault).toHaveBeenCalledWith();
+      });
+
+      it('should not increment value if disabled', () => {
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+        spyOn(inputRange, 'incrementValue');
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(inputRange.incrementValue).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when pressing up arrow key', () => {
+      beforeEach(() => {
+        spyOn(inputRange, 'incrementValue');
+
+        slider = inputRange.refs.sliderMax;
+        event = {
+          keyCode: 38,
+          preventDefault: jasmine.createSpy('preventDefault'),
+        };
+      });
+
+      it('should increment value', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(inputRange.incrementValue).toHaveBeenCalledWith('max');
+      });
+
+      it('should call event.preventDefault()', () => {
+        inputRange.handleSliderKeyDown(event, slider);
+
+        expect(event.preventDefault).toHaveBeenCalledWith();
+      });
+
       it('should not increment value if disabled', () => {
         inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
         spyOn(inputRange, 'incrementValue');