From 56c1d77a5bc08f25ac7a7495a1ceb178b79571f2 Mon Sep 17 00:00:00 2001
From: Loren <loren138@users.noreply.github.com>
Date: Tue, 28 Jan 2020 15:40:11 -0500
Subject: [PATCH] feat(Input): Use form-control-range for range inputs (#1772)

---
 docs/lib/examples/InputType.js | 4 ++++
 src/Input.js                   | 3 +++
 src/__tests__/Input.spec.js    | 7 +++++++
 3 files changed, 14 insertions(+)

diff --git a/docs/lib/examples/InputType.js b/docs/lib/examples/InputType.js
index fbe30dc46..6584f55fa 100644
--- a/docs/lib/examples/InputType.js
+++ b/docs/lib/examples/InputType.js
@@ -126,6 +126,10 @@ const Example = (props) => {
           It's a bit lighter and easily wraps to a new line.
         </FormText>
       </FormGroup>
+      <FormGroup>
+        <Label for="exampleRange">Range</Label>
+        <Input type="range" name="range" id="exampleRange" />
+      </FormGroup>
       <FormGroup check>
         <Label check>
           <Input type="radio" /> Option one is this and that—be sure to
diff --git a/src/Input.js b/src/Input.js
index 51629b6cc..4d9d2bc9b 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -69,6 +69,7 @@ class Input extends React.Component {
     const fileInput = type === 'file';
     const textareaInput = type === 'textarea';
     const selectInput = type === 'select';
+    const rangeInput = type === 'range';
     let Tag = tag || (selectInput || textareaInput ? type : 'input');
 
     let formControlClass = 'form-control';
@@ -78,6 +79,8 @@ class Input extends React.Component {
       Tag = tag || 'input';
     } else if (fileInput) {
       formControlClass = `${formControlClass}-file`;
+    } else if (rangeInput) {
+      formControlClass = `${formControlClass}-range`;
     } else if (checkInput) {
       if (addon) {
         formControlClass = null;
diff --git a/src/__tests__/Input.spec.js b/src/__tests__/Input.spec.js
index 1543ef4c2..3b916a582 100644
--- a/src/__tests__/Input.spec.js
+++ b/src/__tests__/Input.spec.js
@@ -221,4 +221,11 @@ describe('Input', () => {
     expect(input.find('[type="select"]').exists()).toBe(false);
     expect(textarea.find('[type="textarea"]').exists()).toBe(false);
   });
+
+  it('should render with "form-control-range" not "form-control" class when type is range', () => {
+    const wrapper = shallow(<Input type="range" />);
+
+    expect(wrapper.hasClass('form-control-range')).toBe(true);
+    expect(wrapper.hasClass('form-control')).toBe(false);
+  });
 });