feat(Input): Use form-control-range for range inputs

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

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;

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);
+  });
 });