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.
+
+ Range
+
+
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( );
+
+ expect(wrapper.hasClass('form-control-range')).toBe(true);
+ expect(wrapper.hasClass('form-control')).toBe(false);
+ });
});