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

reactstrap · Jan 28, 2020 · 56c1d77 · 56c1d77
1 parent a79417a
commit 56c1d77
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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);
+  });
 });