diff --git a/dev/app/builtin/stories/range-input.stories.js b/dev/app/builtin/stories/range-input.stories.js
index 24b560621b..76aca903e3 100644
--- a/dev/app/builtin/stories/range-input.stories.js
+++ b/dev/app/builtin/stories/range-input.stories.js
@@ -14,7 +14,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             templates: {
               header: 'Range input',
             },
@@ -28,7 +28,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             min: 500,
             max: 0,
             templates: {
@@ -44,7 +44,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             collapsible: true,
             templates: {
               header: 'Range input',
@@ -59,7 +59,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             precision: 2,
             templates: {
               header: 'Range input',
@@ -74,7 +74,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             min: 10,
             templates: {
               header: 'Range input',
@@ -89,7 +89,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             max: 500,
             templates: {
               header: 'Range input',
@@ -104,7 +104,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             min: 10,
             max: 500,
             templates: {
diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md
index 53b64e78b0..b2db0bff6d 100644
--- a/docgen/src/guides/v3-migration.md
+++ b/docgen/src/guides/v3-migration.md
@@ -4,4 +4,58 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
 
 ## Widgets
 
+### RangeInput
+
+#### Options
+
+| Before          | After       |
+| --------------- | ----------- |
+| `attributeName` | `attribute` |
+
+#### CSS classes
+
+| Before                       | After                          |
+| ---------------------------- | ------------------------------ |
+| `ais-range-input`            | `ais-RangeInput`               |
+|                              | `ais-RangeInput--noRefinement` |
+| `ais-range-input--body`      |                                |
+| `ais-range-input--form`      | `ais-RangeInput-form`          |
+| `ais-range-input--fieldset`  |                                |
+|                              | `ais-RangeInput-label`         |
+| `ais-range-input--labelMin`  |                                |
+| `ais-range-input--labelMax`  |                                |
+|                              | `ais-RangeInput-input`         |
+| `ais-range-input--inputMin`  | `ais-RangeInput-input--min`    |
+| `ais-range-input--inputMax`  | `ais-RangeInput-input--max`    |
+| `ais-range-input--separator` | `ais-RangeInput-separator`     |
+| `ais-range-input--submit`    | `ais-RangeInput-button`        |
+
+#### Markup
+
+```html
+<div class="ais-RangeInput">
+  <form class="ais-RangeInput-form">
+    <label class="ais-RangeInput-label">
+      <input class="ais-RangeInput-input ais-RangeInput-input--min" type="number" />
+    </label>
+
+    <span class="ais-RangeInput-separator">to</span>
+
+    <label class="ais-RangeInput-label">
+      <input class="ais-RangeInput-input ais-RangeInput-input--max" type="number" />
+    </label>
+
+    <button class="ais-RangeInput-submit" type="submit">Go</button>
+  </form>
+</div>
+```
+
 ## Connectors
+
+### connectRange
+
+#### Widget options
+
+| Before          | After       |
+| --------------- | ----------- |
+| `attributeName` | `attribute` |
diff --git a/src/components/RangeInput/RangeInput.js b/src/components/RangeInput/RangeInput.js
index bca0eb5cd9..226da6fa31 100644
--- a/src/components/RangeInput/RangeInput.js
+++ b/src/components/RangeInput/RangeInput.js
@@ -1,9 +1,7 @@
 import React, { Component } from 'preact-compat';
 import PropTypes from 'prop-types';
-import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
-import headerFooterHOC from '../../decorators/headerFooter.js';
 
-export class RawRangeInput extends Component {
+export class RangeInput extends Component {
   constructor(props) {
     super(props);
 
@@ -37,12 +35,17 @@ export class RawRangeInput extends Component {
     const { min, max, step, cssClasses, labels } = this.props;
     const isDisabled = min >= max;
 
+    const hasRefinements = Boolean(minValue || maxValue);
+    const rootClassNames = hasRefinements
+      ? cssClasses.root
+      : `${cssClasses.root} ${cssClasses.noRefinement}`;
+
     return (
-      <form className={cssClasses.form} onSubmit={this.onSubmit}>
-        <fieldset className={cssClasses.fieldset}>
-          <label className={cssClasses.labelMin}>
+      <div className={rootClassNames}>
+        <form className={cssClasses.form} onSubmit={this.onSubmit}>
+          <label className={cssClasses.label}>
             <input
-              className={cssClasses.inputMin}
+              className={`${cssClasses.input} ${cssClasses.inputMin}`}
               type="number"
               min={min}
               max={max}
@@ -53,10 +56,12 @@ export class RawRangeInput extends Component {
               disabled={isDisabled}
             />
           </label>
+
           <span className={cssClasses.separator}>{labels.separator}</span>
-          <label className={cssClasses.labelMax}>
+
+          <label className={cssClasses.label}>
             <input
-              className={cssClasses.inputMax}
+              className={`${cssClasses.input} ${cssClasses.inputMax}`}
               type="number"
               min={min}
               max={max}
@@ -67,20 +72,21 @@ export class RawRangeInput extends Component {
               disabled={isDisabled}
             />
           </label>
+
           <button
-            role="button"
-            className={cssClasses.submit}
+            type="submit"
+            className={cssClasses.button}
             disabled={isDisabled}
           >
             {labels.submit}
           </button>
-        </fieldset>
-      </form>
+        </form>
+      </div>
     );
   }
 }
 
-RawRangeInput.propTypes = {
+RangeInput.propTypes = {
   min: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
   step: PropTypes.number.isRequired,
@@ -89,14 +95,15 @@ RawRangeInput.propTypes = {
     max: PropTypes.number,
   }).isRequired,
   cssClasses: PropTypes.shape({
+    root: PropTypes.string.isRequired,
+    noRefinement: PropTypes.string.isRequired,
     form: PropTypes.string.isRequired,
-    fieldset: PropTypes.string.isRequired,
-    labelMin: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    input: PropTypes.string.isRequired,
     inputMin: PropTypes.string.isRequired,
-    separator: PropTypes.string.isRequired,
-    labelMax: PropTypes.string.isRequired,
     inputMax: PropTypes.string.isRequired,
-    submit: PropTypes.string.isRequired,
+    separator: PropTypes.string.isRequired,
+    button: PropTypes.string.isRequired,
   }).isRequired,
   labels: PropTypes.shape({
     separator: PropTypes.string.isRequired,
@@ -105,4 +112,4 @@ RawRangeInput.propTypes = {
   refine: PropTypes.func.isRequired,
 };
 
-export default autoHideContainerHOC(headerFooterHOC(RawRangeInput));
+export default RangeInput;
diff --git a/src/components/RangeInput/__tests__/RangeInput-test.js b/src/components/RangeInput/__tests__/RangeInput-test.js
index dab6acda19..ecf65440d4 100644
--- a/src/components/RangeInput/__tests__/RangeInput-test.js
+++ b/src/components/RangeInput/__tests__/RangeInput-test.js
@@ -1,22 +1,23 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { RawRangeInput } from '../RangeInput';
+import RangeInput from '../RangeInput';
 
-describe('RawRangeInput', () => {
+describe('RangeInput', () => {
   const defaultProps = {
     min: 0,
     max: 500,
     step: 1,
     values: {},
     cssClasses: {
+      root: 'root',
+      noRefinement: 'noRefinement',
       form: 'form',
-      fieldset: 'fieldset',
-      labelMin: 'labelMin',
+      label: 'label',
+      input: 'input',
       inputMin: 'inputMin',
-      separator: 'separator',
-      labelMax: 'labelMax',
       inputMax: 'inputMax',
-      submit: 'submit',
+      separator: 'separator',
+      button: 'button',
     },
     labels: {
       separator: 'to',
@@ -26,7 +27,7 @@ describe('RawRangeInput', () => {
   };
 
   const shallowRender = props =>
-    shallow(<RawRangeInput {...defaultProps} {...props} />);
+    shallow(<RangeInput {...defaultProps} {...props} />);
 
   it('expect to render', () => {
     const props = {};
diff --git a/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.js.snap b/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.js.snap
index 83d4cbe2c1..f48083214d 100644
--- a/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.js.snap
+++ b/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.js.snap
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RawRangeInput expect to render 1`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput expect to render 1`] = `
+<div
+  className="root noRefinement"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={false}
         max={500}
         min={0}
@@ -28,10 +28,10 @@ exports[`RawRangeInput expect to render 1`] = `
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={false}
         max={500}
         min={0}
@@ -42,29 +42,29 @@ exports[`RawRangeInput expect to render 1`] = `
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={false}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
 
-exports[`RawRangeInput expect to render with disabled state 1`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput expect to render with disabled state 1`] = `
+<div
+  className="root noRefinement"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={true}
         max={20}
         min={480}
@@ -80,10 +80,10 @@ exports[`RawRangeInput expect to render with disabled state 1`] = `
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={true}
         max={20}
         min={480}
@@ -94,29 +94,29 @@ exports[`RawRangeInput expect to render with disabled state 1`] = `
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={true}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
 
-exports[`RawRangeInput expect to render with values 1`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput expect to render with values 1`] = `
+<div
+  className="root"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={false}
         max={500}
         min={0}
@@ -133,10 +133,10 @@ exports[`RawRangeInput expect to render with values 1`] = `
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={false}
         max={500}
         min={0}
@@ -148,29 +148,29 @@ exports[`RawRangeInput expect to render with values 1`] = `
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={false}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
 
-exports[`RawRangeInput onChange expect to update the state when max change 1`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput onChange expect to update the state when max change 1`] = `
+<div
+  className="root"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={false}
         max={500}
         min={0}
@@ -186,10 +186,10 @@ exports[`RawRangeInput onChange expect to update the state when max change 1`] =
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={false}
         max={500}
         min={0}
@@ -201,29 +201,29 @@ exports[`RawRangeInput onChange expect to update the state when max change 1`] =
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={false}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
 
-exports[`RawRangeInput onChange expect to update the state when min change 1`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput onChange expect to update the state when min change 1`] = `
+<div
+  className="root"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={false}
         max={500}
         min={0}
@@ -240,10 +240,10 @@ exports[`RawRangeInput onChange expect to update the state when min change 1`] =
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={false}
         max={500}
         min={0}
@@ -254,29 +254,29 @@ exports[`RawRangeInput onChange expect to update the state when min change 1`] =
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={false}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
 
-exports[`RawRangeInput willReceiveProps expect to update the empty state from given props 1`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput willReceiveProps expect to update the empty state from given props 1`] = `
+<div
+  className="root noRefinement"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={false}
         max={500}
         min={0}
@@ -292,10 +292,10 @@ exports[`RawRangeInput willReceiveProps expect to update the empty state from gi
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={false}
         max={500}
         min={0}
@@ -306,29 +306,29 @@ exports[`RawRangeInput willReceiveProps expect to update the empty state from gi
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={false}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
 
-exports[`RawRangeInput willReceiveProps expect to update the empty state from given props 2`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput willReceiveProps expect to update the empty state from given props 2`] = `
+<div
+  className="root noRefinement"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={false}
         max={500}
         min={0}
@@ -344,10 +344,10 @@ exports[`RawRangeInput willReceiveProps expect to update the empty state from gi
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={false}
         max={500}
         min={0}
@@ -358,29 +358,29 @@ exports[`RawRangeInput willReceiveProps expect to update the empty state from gi
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={false}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
 
-exports[`RawRangeInput willReceiveProps expect to update the state from given props 1`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput willReceiveProps expect to update the state from given props 1`] = `
+<div
+  className="root"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={false}
         max={500}
         min={0}
@@ -397,10 +397,10 @@ exports[`RawRangeInput willReceiveProps expect to update the state from given pr
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={false}
         max={500}
         min={0}
@@ -412,29 +412,29 @@ exports[`RawRangeInput willReceiveProps expect to update the state from given pr
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={false}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
 
-exports[`RawRangeInput willReceiveProps expect to update the state from given props 2`] = `
-<form
-  className="form"
-  onSubmit={[Function]}
+exports[`RangeInput willReceiveProps expect to update the state from given props 2`] = `
+<div
+  className="root"
 >
-  <fieldset
-    className="fieldset"
+  <form
+    className="form"
+    onSubmit={[Function]}
   >
     <label
-      className="labelMin"
+      className="label"
     >
       <input
-        className="inputMin"
+        className="input inputMin"
         disabled={false}
         max={500}
         min={0}
@@ -451,10 +451,10 @@ exports[`RawRangeInput willReceiveProps expect to update the state from given pr
       to
     </span>
     <label
-      className="labelMax"
+      className="label"
     >
       <input
-        className="inputMax"
+        className="input inputMax"
         disabled={false}
         max={500}
         min={0}
@@ -466,12 +466,12 @@ exports[`RawRangeInput willReceiveProps expect to update the state from given pr
       />
     </label>
     <button
-      className="submit"
+      className="button"
       disabled={false}
-      role="button"
+      type="submit"
     >
       Go
     </button>
-  </fieldset>
-</form>
+  </form>
+</div>
 `;
diff --git a/src/connectors/range/__tests__/connectRange-test.js b/src/connectors/range/__tests__/connectRange-test.js
index 28fb567b91..f4ceaa2f41 100644
--- a/src/connectors/range/__tests__/connectRange-test.js
+++ b/src/connectors/range/__tests__/connectRange-test.js
@@ -14,14 +14,14 @@ describe('connectRange', () => {
     const rendering = sinon.stub();
     const makeWidget = connectRange(rendering);
 
-    const attributeName = 'price';
+    const attribute = 'price';
     const widget = makeWidget({
-      attributeName,
+      attribute,
     });
 
     const config = widget.getConfiguration();
     expect(config).toEqual({
-      disjunctiveFacets: [attributeName],
+      disjunctiveFacets: [attribute],
     });
 
     const helper = jsHelper({}, '', config);
@@ -45,7 +45,7 @@ describe('connectRange', () => {
       expect(range).toEqual({ min: 0, max: 0 });
       expect(start).toEqual([-Infinity, Infinity]);
       expect(widgetParams).toEqual({
-        attributeName,
+        attribute,
         precision: 2,
       });
     }
@@ -85,7 +85,7 @@ describe('connectRange', () => {
       expect(range).toEqual({ min: 10, max: 30 });
       expect(start).toEqual([-Infinity, Infinity]);
       expect(widgetParams).toEqual({
-        attributeName,
+        attribute,
         precision: 2,
       });
     }
@@ -94,28 +94,28 @@ describe('connectRange', () => {
   it('Accepts some user bounds', () => {
     const makeWidget = connectRange(() => {});
 
-    const attributeName = 'price';
+    const attribute = 'price';
 
-    expect(makeWidget({ attributeName, min: 0 }).getConfiguration()).toEqual({
-      disjunctiveFacets: [attributeName],
+    expect(makeWidget({ attribute, min: 0 }).getConfiguration()).toEqual({
+      disjunctiveFacets: [attribute],
       numericRefinements: {
-        [attributeName]: { '>=': [0] },
+        [attribute]: { '>=': [0] },
       },
     });
 
-    expect(makeWidget({ attributeName, max: 100 }).getConfiguration()).toEqual({
-      disjunctiveFacets: [attributeName],
+    expect(makeWidget({ attribute, max: 100 }).getConfiguration()).toEqual({
+      disjunctiveFacets: [attribute],
       numericRefinements: {
-        [attributeName]: { '<=': [100] },
+        [attribute]: { '<=': [100] },
       },
     });
 
     expect(
-      makeWidget({ attributeName, min: 0, max: 100 }).getConfiguration()
+      makeWidget({ attribute, min: 0, max: 100 }).getConfiguration()
     ).toEqual({
-      disjunctiveFacets: [attributeName],
+      disjunctiveFacets: [attribute],
       numericRefinements: {
-        [attributeName]: {
+        [attribute]: {
           '>=': [0],
           '<=': [100],
         },
@@ -127,9 +127,9 @@ describe('connectRange', () => {
     const rendering = sinon.stub();
     const makeWidget = connectRange(rendering);
 
-    const attributeName = 'price';
+    const attribute = 'price';
     const widget = makeWidget({
-      attributeName,
+      attribute,
     });
 
     const helper = jsHelper({}, '', widget.getConfiguration());
@@ -196,8 +196,8 @@ describe('connectRange', () => {
     const rendering = sinon.stub();
     const makeWidget = connectRange(rendering);
 
-    const attributeName = 'price';
-    const widget = makeWidget({ attributeName, min: 0, max: 500 });
+    const attribute = 'price';
+    const widget = makeWidget({ attribute, min: 0, max: 500 });
 
     const helper = jsHelper({}, '', widget.getConfiguration());
     helper.search = sinon.stub();
@@ -232,8 +232,8 @@ describe('connectRange', () => {
     const rendering = sinon.stub();
     const makeWidget = connectRange(rendering);
 
-    const attributeName = 'price';
-    const widget = makeWidget({ attributeName, min: 0, max: 500 });
+    const attribute = 'price';
+    const widget = makeWidget({ attribute, min: 0, max: 500 });
     const configuration = widget.getConfiguration({
       indexName: 'movie',
     });
@@ -271,8 +271,8 @@ describe('connectRange', () => {
     const rendering = sinon.stub();
     const makeWidget = connectRange(rendering);
 
-    const attributeName = 'price';
-    const widget = makeWidget({ attributeName });
+    const attribute = 'price';
+    const widget = makeWidget({ attribute });
 
     const helper = jsHelper({}, '', widget.getConfiguration());
     helper.search = sinon.stub();
@@ -309,13 +309,13 @@ describe('connectRange', () => {
   });
 
   describe('getConfiguration', () => {
-    const attributeName = 'price';
+    const attribute = 'price';
     const rendering = () => {};
 
     it('expect to return default configuration', () => {
       const currentConfiguration = {};
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
       });
 
       const expectation = { disjunctiveFacets: ['price'] };
@@ -334,7 +334,7 @@ describe('connectRange', () => {
       };
 
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         max: 500,
       });
 
@@ -347,7 +347,7 @@ describe('connectRange', () => {
     it('expect to return default configuration if the given min bound are greater than max bound', () => {
       const currentConfiguration = {};
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         min: 1000,
         max: 500,
       });
@@ -361,7 +361,7 @@ describe('connectRange', () => {
     it('expect to return configuration with min numeric refinement', () => {
       const currentConfiguration = {};
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         min: 10,
       });
 
@@ -382,7 +382,7 @@ describe('connectRange', () => {
     it('expect to return configuration with max numeric refinement', () => {
       const currentConfiguration = {};
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         max: 10,
       });
 
@@ -403,7 +403,7 @@ describe('connectRange', () => {
     it('expect to return configuration with both numeric refinements', () => {
       const currentConfiguration = {};
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         min: 10,
         max: 500,
       });
@@ -425,13 +425,13 @@ describe('connectRange', () => {
   });
 
   describe('_getCurrentRange', () => {
-    const attributeName = 'price';
+    const attribute = 'price';
     const rendering = () => {};
 
     it('expect to return default range', () => {
       const stats = {};
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
       });
 
       const expectation = { min: 0, max: 0 };
@@ -443,7 +443,7 @@ describe('connectRange', () => {
     it('expect to return range from bounds', () => {
       const stats = { min: 10, max: 500 };
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         min: 20,
         max: 250,
       });
@@ -457,7 +457,7 @@ describe('connectRange', () => {
     it('expect to return range from stats', () => {
       const stats = { min: 10, max: 500 };
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
       });
 
       const expectation = { min: 10, max: 500 };
@@ -469,7 +469,7 @@ describe('connectRange', () => {
     it('expect to return rounded range values when precision is 0', () => {
       const stats = { min: 1.79, max: 499.99 };
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         precision: 0,
       });
 
@@ -482,7 +482,7 @@ describe('connectRange', () => {
     it('expect to return rounded range values when precision is 1', () => {
       const stats = { min: 1.12345, max: 499.56789 };
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         precision: 1,
       });
 
@@ -495,7 +495,7 @@ describe('connectRange', () => {
     it('expect to return rounded range values when precision is 2', () => {
       const stats = { min: 1.12345, max: 499.56789 };
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         precision: 2,
       });
 
@@ -508,7 +508,7 @@ describe('connectRange', () => {
     it('expect to return rounded range values when precision is 3', () => {
       const stats = { min: 1.12345, max: 499.56789 };
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         precision: 3,
       });
 
@@ -520,12 +520,12 @@ describe('connectRange', () => {
   });
 
   describe('_getCurrentRefinement', () => {
-    const attributeName = 'price';
+    const attribute = 'price';
     const rendering = () => {};
     const createHelper = () => jsHelper({});
 
     it('expect to return default refinement', () => {
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
       const helper = createHelper();
 
       const expectation = [-Infinity, Infinity];
@@ -535,11 +535,11 @@ describe('connectRange', () => {
     });
 
     it('expect to return refinement from helper', () => {
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
       const helper = createHelper();
 
-      helper.addNumericRefinement(attributeName, '>=', 10);
-      helper.addNumericRefinement(attributeName, '<=', 100);
+      helper.addNumericRefinement(attribute, '>=', 10);
+      helper.addNumericRefinement(attribute, '<=', 100);
 
       const expectation = [10, 100];
       const actual = widget._getCurrentRefinement(helper);
@@ -548,11 +548,11 @@ describe('connectRange', () => {
     });
 
     it('expect to return float refinement values', () => {
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
       const helper = createHelper();
 
-      helper.addNumericRefinement(attributeName, '>=', 10.9);
-      helper.addNumericRefinement(attributeName, '<=', 99.1);
+      helper.addNumericRefinement(attribute, '>=', 10.9);
+      helper.addNumericRefinement(attribute, '<=', 99.1);
 
       const expectation = [10.9, 99.1];
       const actual = widget._getCurrentRefinement(helper);
@@ -562,7 +562,7 @@ describe('connectRange', () => {
   });
 
   describe('_refine', () => {
-    const attributeName = 'price';
+    const attribute = 'price';
     const rendering = () => {};
     const createHelper = () => {
       const helper = jsHelper({});
@@ -580,14 +580,14 @@ describe('connectRange', () => {
       const values = [10, 490];
       const helper = createHelper();
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
       });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
-      expect(helper.clearRefinements).toHaveBeenCalledWith(attributeName);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
+      expect(helper.clearRefinements).toHaveBeenCalledWith(attribute);
       expect(helper.search).toHaveBeenCalled();
     });
 
@@ -595,13 +595,13 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = [10, 490];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
-      expect(helper.clearRefinements).toHaveBeenCalledWith(attributeName);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
+      expect(helper.clearRefinements).toHaveBeenCalledWith(attribute);
       expect(helper.search).toHaveBeenCalled();
     });
 
@@ -609,12 +609,12 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = ['10', '490'];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
       expect(helper.clearRefinements).toHaveBeenCalled();
       expect(helper.search).toHaveBeenCalled();
     });
@@ -623,12 +623,12 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = ['10.50', '490.50'];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10.5]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490.5]);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10.5]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490.5]);
       expect(helper.clearRefinements).toHaveBeenCalled();
       expect(helper.search).toHaveBeenCalled();
     });
@@ -638,14 +638,14 @@ describe('connectRange', () => {
       const values = [10, 490];
       const helper = createHelper();
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         min: 10,
       });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
       expect(helper.clearRefinements).toHaveBeenCalled();
       expect(helper.search).toHaveBeenCalled();
     });
@@ -655,14 +655,14 @@ describe('connectRange', () => {
       const values = [10, 490];
       const helper = createHelper();
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         max: 490,
       });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
       expect(helper.clearRefinements).toHaveBeenCalled();
       expect(helper.search).toHaveBeenCalled();
     });
@@ -671,18 +671,16 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = [undefined, 490];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
-      helper.addNumericRefinement(attributeName, '>=', 10);
-      helper.addNumericRefinement(attributeName, '<=', 490);
+      helper.addNumericRefinement(attribute, '>=', 10);
+      helper.addNumericRefinement(attribute, '<=', 490);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual(
-        undefined
-      );
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
-      expect(helper.clearRefinements).toHaveBeenCalledWith(attributeName);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual(undefined);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
+      expect(helper.clearRefinements).toHaveBeenCalledWith(attribute);
       expect(helper.search).toHaveBeenCalled();
     });
 
@@ -690,18 +688,16 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = [10, undefined];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
-      helper.addNumericRefinement(attributeName, '>=', 10);
-      helper.addNumericRefinement(attributeName, '<=', 490);
+      helper.addNumericRefinement(attribute, '>=', 10);
+      helper.addNumericRefinement(attribute, '<=', 490);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual(
-        undefined
-      );
-      expect(helper.clearRefinements).toHaveBeenCalledWith(attributeName);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual(undefined);
+      expect(helper.clearRefinements).toHaveBeenCalledWith(attribute);
       expect(helper.search).toHaveBeenCalled();
     });
 
@@ -709,18 +705,16 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = ['', 490];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
-      helper.addNumericRefinement(attributeName, '>=', 10);
-      helper.addNumericRefinement(attributeName, '<=', 490);
+      helper.addNumericRefinement(attribute, '>=', 10);
+      helper.addNumericRefinement(attribute, '<=', 490);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual(
-        undefined
-      );
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
-      expect(helper.clearRefinements).toHaveBeenCalledWith(attributeName);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual(undefined);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
+      expect(helper.clearRefinements).toHaveBeenCalledWith(attribute);
       expect(helper.search).toHaveBeenCalled();
     });
 
@@ -728,18 +722,16 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = [10, ''];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
-      helper.addNumericRefinement(attributeName, '>=', 10);
-      helper.addNumericRefinement(attributeName, '<=', 490);
+      helper.addNumericRefinement(attribute, '>=', 10);
+      helper.addNumericRefinement(attribute, '<=', 490);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual(
-        undefined
-      );
-      expect(helper.clearRefinements).toHaveBeenCalledWith(attributeName);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual(undefined);
+      expect(helper.clearRefinements).toHaveBeenCalledWith(attribute);
       expect(helper.search).toHaveBeenCalled();
     });
 
@@ -747,17 +739,15 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = [0, 490];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
-      helper.addNumericRefinement(attributeName, '>=', 10);
+      helper.addNumericRefinement(attribute, '>=', 10);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual(
-        undefined
-      );
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
-      expect(helper.clearRefinements).toHaveBeenCalledWith(attributeName);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual(undefined);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
+      expect(helper.clearRefinements).toHaveBeenCalledWith(attribute);
       expect(helper.search).toHaveBeenCalled();
     });
 
@@ -765,17 +755,15 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = [10, 500];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
-      helper.addNumericRefinement(attributeName, '<=', 490);
+      helper.addNumericRefinement(attribute, '<=', 490);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual(
-        undefined
-      );
-      expect(helper.clearRefinements).toHaveBeenCalledWith(attributeName);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual(undefined);
+      expect(helper.clearRefinements).toHaveBeenCalledWith(attribute);
       expect(helper.search).toHaveBeenCalled();
     });
 
@@ -784,16 +772,16 @@ describe('connectRange', () => {
       const values = [undefined, 490];
       const helper = createHelper();
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         min: 10,
       });
 
-      helper.addNumericRefinement(attributeName, '>=', 20);
+      helper.addNumericRefinement(attribute, '>=', 20);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
       expect(helper.clearRefinements).toHaveBeenCalled();
       expect(helper.search).toHaveBeenCalled();
     });
@@ -803,16 +791,16 @@ describe('connectRange', () => {
       const values = [10, undefined];
       const helper = createHelper();
       const widget = connectRange(rendering)({
-        attributeName,
+        attribute,
         max: 250,
       });
 
-      helper.addNumericRefinement(attributeName, '>=', 240);
+      helper.addNumericRefinement(attribute, '>=', 240);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([250]);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([250]);
       expect(helper.clearRefinements).toHaveBeenCalled();
       expect(helper.search).toHaveBeenCalled();
     });
@@ -821,16 +809,12 @@ describe('connectRange', () => {
       const range = { min: 10, max: 500 };
       const values = [0, 490];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual(
-        undefined
-      );
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual(
-        undefined
-      );
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual(undefined);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual(undefined);
       expect(helper.clearRefinements).not.toHaveBeenCalled();
       expect(helper.search).not.toHaveBeenCalled();
     });
@@ -839,16 +823,12 @@ describe('connectRange', () => {
       const range = { min: 0, max: 490 };
       const values = [10, 500];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual(
-        undefined
-      );
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual(
-        undefined
-      );
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual(undefined);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual(undefined);
       expect(helper.clearRefinements).not.toHaveBeenCalled();
       expect(helper.search).not.toHaveBeenCalled();
     });
@@ -857,16 +837,12 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = [undefined, undefined];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual(
-        undefined
-      );
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual(
-        undefined
-      );
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual(undefined);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual(undefined);
       expect(helper.clearRefinements).not.toHaveBeenCalled();
       expect(helper.search).not.toHaveBeenCalled();
     });
@@ -875,15 +851,15 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = [10, 490];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
-      helper.addNumericRefinement(attributeName, '>=', 10);
-      helper.addNumericRefinement(attributeName, '<=', 490);
+      helper.addNumericRefinement(attribute, '>=', 10);
+      helper.addNumericRefinement(attribute, '<=', 490);
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual([10]);
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual([490]);
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual([10]);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual([490]);
       expect(helper.clearRefinements).not.toHaveBeenCalled();
       expect(helper.search).not.toHaveBeenCalled();
     });
@@ -892,16 +868,12 @@ describe('connectRange', () => {
       const range = { min: 0, max: 500 };
       const values = ['ADASA', 'FFDSFQS'];
       const helper = createHelper();
-      const widget = connectRange(rendering)({ attributeName });
+      const widget = connectRange(rendering)({ attribute });
 
       widget._refine(helper, range)(values);
 
-      expect(helper.getNumericRefinement(attributeName, '>=')).toEqual(
-        undefined
-      );
-      expect(helper.getNumericRefinement(attributeName, '<=')).toEqual(
-        undefined
-      );
+      expect(helper.getNumericRefinement(attribute, '>=')).toEqual(undefined);
+      expect(helper.getNumericRefinement(attribute, '<=')).toEqual(undefined);
       expect(helper.clearRefinements).not.toHaveBeenCalled();
       expect(helper.search).not.toHaveBeenCalled();
     });
@@ -912,7 +884,7 @@ describe('connectRange', () => {
       const rendering = jest.fn();
       const makeWidget = connectRange(rendering);
       const widget = makeWidget({
-        attributeName: 'price',
+        attribute: 'price',
       });
 
       const config = widget.getConfiguration({}, {});
diff --git a/src/connectors/range/connectRange.js b/src/connectors/range/connectRange.js
index e44219ffc5..4b2b67ad38 100644
--- a/src/connectors/range/connectRange.js
+++ b/src/connectors/range/connectRange.js
@@ -16,7 +16,7 @@ var customRange = connectRange(function render(params, isFirstRendering) {
 });
 search.addWidget(
   customRange({
-    attributeName,
+    attribute,
     [ min ],
     [ max ],
     [ precision = 2 ],
@@ -27,7 +27,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
 
 /**
  * @typedef {Object} CustomRangeWidgetOptions
- * @property {string} attributeName Name of the attribute for faceting.
+ * @property {string} attribute Name of the attribute for faceting.
  * @property {number} [min = undefined] Minimal range value, default to automatically computed from the result set.
  * @property {number} [max = undefined] Maximal range value, default to automatically computed from the result set.
  * @property {number} [precision = 2] Number of digits after decimal point to use.
@@ -61,13 +61,13 @@ export default function connectRange(renderFn, unmountFn) {
 
   return (widgetParams = {}) => {
     const {
-      attributeName,
+      attribute,
       min: minBound,
       max: maxBound,
       precision = 2,
     } = widgetParams;
 
-    if (!attributeName) {
+    if (!attribute) {
       throw new Error(usage);
     }
 
@@ -110,11 +110,9 @@ export default function connectRange(renderFn, unmountFn) {
       },
 
       _getCurrentRefinement(helper) {
-        const [minValue] =
-          helper.getNumericRefinement(attributeName, '>=') || [];
+        const [minValue] = helper.getNumericRefinement(attribute, '>=') || [];
 
-        const [maxValue] =
-          helper.getNumericRefinement(attributeName, '<=') || [];
+        const [maxValue] = helper.getNumericRefinement(attribute, '<=') || [];
 
         const min = _isFinite(minValue) ? minValue : -Infinity;
         const max = _isFinite(maxValue) ? maxValue : Infinity;
@@ -127,8 +125,8 @@ export default function connectRange(renderFn, unmountFn) {
         return ([nextMin, nextMax] = []) => {
           const { min: currentRangeMin, max: currentRangeMax } = currentRange;
 
-          const [min] = helper.getNumericRefinement(attributeName, '>=') || [];
-          const [max] = helper.getNumericRefinement(attributeName, '<=') || [];
+          const [min] = helper.getNumericRefinement(attribute, '>=') || [];
+          const [max] = helper.getNumericRefinement(attribute, '<=') || [];
 
           const isResetMin = nextMin === undefined || nextMin === '';
           const isResetMax = nextMax === undefined || nextMax === '';
@@ -178,11 +176,11 @@ export default function connectRange(renderFn, unmountFn) {
           const hasMaxChange = max !== newNextMax;
 
           if ((hasMinChange || hasMaxChange) && (isMinValid && isMaxValid)) {
-            helper.clearRefinements(attributeName);
+            helper.clearRefinements(attribute);
 
             if (isValidNewNextMin) {
               helper.addNumericRefinement(
-                attributeName,
+                attribute,
                 '>=',
                 formatToNumber(newNextMin)
               );
@@ -190,7 +188,7 @@ export default function connectRange(renderFn, unmountFn) {
 
             if (isValidNewNextMax) {
               helper.addNumericRefinement(
-                attributeName,
+                attribute,
                 '<=',
                 formatToNumber(newNextMax)
               );
@@ -203,7 +201,7 @@ export default function connectRange(renderFn, unmountFn) {
 
       getConfiguration(currentConfiguration) {
         const configuration = {
-          disjunctiveFacets: [attributeName],
+          disjunctiveFacets: [attribute],
         };
 
         const isBoundsDefined = hasMinBound || hasMaxBound;
@@ -211,7 +209,7 @@ export default function connectRange(renderFn, unmountFn) {
         const boundsAlreadyDefined =
           currentConfiguration &&
           currentConfiguration.numericRefinements &&
-          currentConfiguration.numericRefinements[attributeName] !== undefined;
+          currentConfiguration.numericRefinements[attribute] !== undefined;
 
         const isMinBoundValid = _isFinite(minBound);
         const isMaxBoundValid = _isFinite(maxBound);
@@ -221,14 +219,14 @@ export default function connectRange(renderFn, unmountFn) {
             : isMinBoundValid || isMaxBoundValid;
 
         if (isBoundsDefined && !boundsAlreadyDefined && isAbleToRefine) {
-          configuration.numericRefinements = { [attributeName]: {} };
+          configuration.numericRefinements = { [attribute]: {} };
 
           if (hasMinBound) {
-            configuration.numericRefinements[attributeName]['>='] = [minBound];
+            configuration.numericRefinements[attribute]['>='] = [minBound];
           }
 
           if (hasMaxBound) {
-            configuration.numericRefinements[attributeName]['<='] = [maxBound];
+            configuration.numericRefinements[attribute]['<='] = [maxBound];
           }
         }
 
@@ -261,7 +259,7 @@ export default function connectRange(renderFn, unmountFn) {
 
       render({ results, helper, instantSearchInstance }) {
         const facetsFromResults = results.disjunctiveFacets || [];
-        const facet = find(facetsFromResults, { name: attributeName });
+        const facet = find(facetsFromResults, { name: attribute });
         const stats = (facet && facet.stats) || {};
 
         const currentRange = this._getCurrentRange(stats);
@@ -287,8 +285,8 @@ export default function connectRange(renderFn, unmountFn) {
         unmountFn();
 
         const nextState = state
-          .removeNumericRefinement(attributeName)
-          .removeDisjunctiveFacet(attributeName);
+          .removeNumericRefinement(attribute)
+          .removeDisjunctiveFacet(attribute);
 
         return nextState;
       },
@@ -297,13 +295,13 @@ export default function connectRange(renderFn, unmountFn) {
         const {
           '>=': min = '',
           '<=': max = '',
-        } = searchParameters.getNumericRefinements(attributeName);
+        } = searchParameters.getNumericRefinements(attribute);
 
         if (
           (min === '' && max === '') ||
           (uiState &&
             uiState.range &&
-            uiState.range[attributeName] === `${min}:${max}`)
+            uiState.range[attribute] === `${min}:${max}`)
         ) {
           return uiState;
         }
@@ -312,13 +310,13 @@ export default function connectRange(renderFn, unmountFn) {
           ...uiState,
           range: {
             ...uiState.range,
-            [attributeName]: `${min}:${max}`,
+            [attribute]: `${min}:${max}`,
           },
         };
       },
 
       getWidgetSearchParameters(searchParameters, { uiState }) {
-        const value = uiState && uiState.range && uiState.range[attributeName];
+        const value = uiState && uiState.range && uiState.range[attribute];
 
         if (!value || value.indexOf(':') === -1) {
           return searchParameters;
@@ -327,8 +325,8 @@ export default function connectRange(renderFn, unmountFn) {
         const {
           '>=': previousMin = [NaN],
           '<=': previousMax = [NaN],
-        } = searchParameters.getNumericRefinements(attributeName);
-        let clearedParams = searchParameters.clearRefinements(attributeName);
+        } = searchParameters.getNumericRefinements(attribute);
+        let clearedParams = searchParameters.clearRefinements(attribute);
         const [lowerBound, upperBound] = value.split(':').map(parseFloat);
 
         if (
@@ -340,7 +338,7 @@ export default function connectRange(renderFn, unmountFn) {
 
         if (_isFinite(lowerBound)) {
           clearedParams = clearedParams.addNumericRefinement(
-            attributeName,
+            attribute,
             '>=',
             lowerBound
           );
@@ -348,7 +346,7 @@ export default function connectRange(renderFn, unmountFn) {
 
         if (_isFinite(upperBound)) {
           clearedParams = clearedParams.addNumericRefinement(
-            attributeName,
+            attribute,
             '<=',
             upperBound
           );
diff --git a/src/widgets/range-input/__tests__/__snapshots__/range-input-test.js.snap b/src/widgets/range-input/__tests__/__snapshots__/range-input-test.js.snap
index 28c3860719..1e6be51e92 100644
--- a/src/widgets/range-input/__tests__/__snapshots__/range-input-test.js.snap
+++ b/src/widgets/range-input/__tests__/__snapshots__/range-input-test.js.snap
@@ -1,22 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rangeInput expect to render with custom classNames 1`] = `
-<HeaderFooter-AutoHide
+<RangeInput
   collapsible={false}
   cssClasses={
     Object {
-      "body": "ais-range-input--body custom-body",
-      "fieldset": "ais-range-input--fieldset custom-fieldset",
-      "footer": "ais-range-input--footer custom-footer",
-      "form": "ais-range-input--form custom-form",
-      "header": "ais-range-input--header custom-header",
-      "inputMax": "ais-range-input--inputMax custom-inputMax",
-      "inputMin": "ais-range-input--inputMin custom-inputMin",
-      "labelMax": "ais-range-input--labelMax custom-labelMax",
-      "labelMin": "ais-range-input--labelMin custom-labelMin",
-      "root": "ais-range-input custom-root",
-      "separator": "ais-range-input--separator custom-separator",
-      "submit": "ais-range-input--submit custom-submit",
+      "button": "ais-RangeInput-button",
+      "form": "ais-RangeInput-form custom-form",
+      "input": "ais-RangeInput-input",
+      "inputMax": "ais-RangeInput-input--max custom-inputMax",
+      "inputMin": "ais-RangeInput-input--min custom-inputMin",
+      "label": "ais-RangeInput-label",
+      "noRefinement": "ais-RangeInput--noRefinement",
+      "root": "ais-RangeInput custom-root",
+      "separator": "ais-RangeInput-separator custom-separator",
     }
   }
   labels={
@@ -28,7 +25,6 @@ exports[`rangeInput expect to render with custom classNames 1`] = `
   max={0}
   min={0}
   refine={[Function]}
-  shouldAutoHideContainer={true}
   step={1}
   templateProps={
     Object {
@@ -54,22 +50,19 @@ exports[`rangeInput expect to render with custom classNames 1`] = `
 `;
 
 exports[`rangeInput expect to render with custom labels 1`] = `
-<HeaderFooter-AutoHide
+<RangeInput
   collapsible={false}
   cssClasses={
     Object {
-      "body": "ais-range-input--body",
-      "fieldset": "ais-range-input--fieldset",
-      "footer": "ais-range-input--footer",
-      "form": "ais-range-input--form",
-      "header": "ais-range-input--header",
-      "inputMax": "ais-range-input--inputMax",
-      "inputMin": "ais-range-input--inputMin",
-      "labelMax": "ais-range-input--labelMax",
-      "labelMin": "ais-range-input--labelMin",
-      "root": "ais-range-input",
-      "separator": "ais-range-input--separator",
-      "submit": "ais-range-input--submit",
+      "button": "ais-RangeInput-button",
+      "form": "ais-RangeInput-form",
+      "input": "ais-RangeInput-input",
+      "inputMax": "ais-RangeInput-input--max",
+      "inputMin": "ais-RangeInput-input--min",
+      "label": "ais-RangeInput-label",
+      "noRefinement": "ais-RangeInput--noRefinement",
+      "root": "ais-RangeInput",
+      "separator": "ais-RangeInput-separator",
     }
   }
   labels={
@@ -81,7 +74,6 @@ exports[`rangeInput expect to render with custom labels 1`] = `
   max={0}
   min={0}
   refine={[Function]}
-  shouldAutoHideContainer={true}
   step={1}
   templateProps={
     Object {
@@ -107,22 +99,19 @@ exports[`rangeInput expect to render with custom labels 1`] = `
 `;
 
 exports[`rangeInput expect to render with refinement 1`] = `
-<HeaderFooter-AutoHide
+<RangeInput
   collapsible={false}
   cssClasses={
     Object {
-      "body": "ais-range-input--body",
-      "fieldset": "ais-range-input--fieldset",
-      "footer": "ais-range-input--footer",
-      "form": "ais-range-input--form",
-      "header": "ais-range-input--header",
-      "inputMax": "ais-range-input--inputMax",
-      "inputMin": "ais-range-input--inputMin",
-      "labelMax": "ais-range-input--labelMax",
-      "labelMin": "ais-range-input--labelMin",
-      "root": "ais-range-input",
-      "separator": "ais-range-input--separator",
-      "submit": "ais-range-input--submit",
+      "button": "ais-RangeInput-button",
+      "form": "ais-RangeInput-form",
+      "input": "ais-RangeInput-input",
+      "inputMax": "ais-RangeInput-input--max",
+      "inputMin": "ais-RangeInput-input--min",
+      "label": "ais-RangeInput-label",
+      "noRefinement": "ais-RangeInput--noRefinement",
+      "root": "ais-RangeInput",
+      "separator": "ais-RangeInput-separator",
     }
   }
   labels={
@@ -134,7 +123,6 @@ exports[`rangeInput expect to render with refinement 1`] = `
   max={500}
   min={10}
   refine={[Function]}
-  shouldAutoHideContainer={false}
   step={1}
   templateProps={
     Object {
@@ -160,22 +148,19 @@ exports[`rangeInput expect to render with refinement 1`] = `
 `;
 
 exports[`rangeInput expect to render with refinement at boundaries 1`] = `
-<HeaderFooter-AutoHide
+<RangeInput
   collapsible={false}
   cssClasses={
     Object {
-      "body": "ais-range-input--body",
-      "fieldset": "ais-range-input--fieldset",
-      "footer": "ais-range-input--footer",
-      "form": "ais-range-input--form",
-      "header": "ais-range-input--header",
-      "inputMax": "ais-range-input--inputMax",
-      "inputMin": "ais-range-input--inputMin",
-      "labelMax": "ais-range-input--labelMax",
-      "labelMin": "ais-range-input--labelMin",
-      "root": "ais-range-input",
-      "separator": "ais-range-input--separator",
-      "submit": "ais-range-input--submit",
+      "button": "ais-RangeInput-button",
+      "form": "ais-RangeInput-form",
+      "input": "ais-RangeInput-input",
+      "inputMax": "ais-RangeInput-input--max",
+      "inputMin": "ais-RangeInput-input--min",
+      "label": "ais-RangeInput-label",
+      "noRefinement": "ais-RangeInput--noRefinement",
+      "root": "ais-RangeInput",
+      "separator": "ais-RangeInput-separator",
     }
   }
   labels={
@@ -187,7 +172,6 @@ exports[`rangeInput expect to render with refinement at boundaries 1`] = `
   max={500}
   min={10}
   refine={[Function]}
-  shouldAutoHideContainer={false}
   step={1}
   templateProps={
     Object {
@@ -213,22 +197,19 @@ exports[`rangeInput expect to render with refinement at boundaries 1`] = `
 `;
 
 exports[`rangeInput expect to render with results 1`] = `
-<HeaderFooter-AutoHide
+<RangeInput
   collapsible={false}
   cssClasses={
     Object {
-      "body": "ais-range-input--body",
-      "fieldset": "ais-range-input--fieldset",
-      "footer": "ais-range-input--footer",
-      "form": "ais-range-input--form",
-      "header": "ais-range-input--header",
-      "inputMax": "ais-range-input--inputMax",
-      "inputMin": "ais-range-input--inputMin",
-      "labelMax": "ais-range-input--labelMax",
-      "labelMin": "ais-range-input--labelMin",
-      "root": "ais-range-input",
-      "separator": "ais-range-input--separator",
-      "submit": "ais-range-input--submit",
+      "button": "ais-RangeInput-button",
+      "form": "ais-RangeInput-form",
+      "input": "ais-RangeInput-input",
+      "inputMax": "ais-RangeInput-input--max",
+      "inputMin": "ais-RangeInput-input--min",
+      "label": "ais-RangeInput-label",
+      "noRefinement": "ais-RangeInput--noRefinement",
+      "root": "ais-RangeInput",
+      "separator": "ais-RangeInput-separator",
     }
   }
   labels={
@@ -240,7 +221,6 @@ exports[`rangeInput expect to render with results 1`] = `
   max={500}
   min={10}
   refine={[Function]}
-  shouldAutoHideContainer={false}
   step={1}
   templateProps={
     Object {
@@ -266,22 +246,19 @@ exports[`rangeInput expect to render with results 1`] = `
 `;
 
 exports[`rangeInput expect to render without results 1`] = `
-<HeaderFooter-AutoHide
+<RangeInput
   collapsible={false}
   cssClasses={
     Object {
-      "body": "ais-range-input--body",
-      "fieldset": "ais-range-input--fieldset",
-      "footer": "ais-range-input--footer",
-      "form": "ais-range-input--form",
-      "header": "ais-range-input--header",
-      "inputMax": "ais-range-input--inputMax",
-      "inputMin": "ais-range-input--inputMin",
-      "labelMax": "ais-range-input--labelMax",
-      "labelMin": "ais-range-input--labelMin",
-      "root": "ais-range-input",
-      "separator": "ais-range-input--separator",
-      "submit": "ais-range-input--submit",
+      "button": "ais-RangeInput-button",
+      "form": "ais-RangeInput-form",
+      "input": "ais-RangeInput-input",
+      "inputMax": "ais-RangeInput-input--max",
+      "inputMin": "ais-RangeInput-input--min",
+      "label": "ais-RangeInput-label",
+      "noRefinement": "ais-RangeInput--noRefinement",
+      "root": "ais-RangeInput",
+      "separator": "ais-RangeInput-separator",
     }
   }
   labels={
@@ -293,7 +270,6 @@ exports[`rangeInput expect to render without results 1`] = `
   max={0}
   min={0}
   refine={[Function]}
-  shouldAutoHideContainer={true}
   step={1}
   templateProps={
     Object {
diff --git a/src/widgets/range-input/__tests__/range-input-test.js b/src/widgets/range-input/__tests__/range-input-test.js
index c56142a36f..072d8994f3 100644
--- a/src/widgets/range-input/__tests__/range-input-test.js
+++ b/src/widgets/range-input/__tests__/range-input-test.js
@@ -11,7 +11,7 @@ jest.mock('preact-compat', () => {
 });
 
 describe('rangeInput', () => {
-  const attributeName = 'aNumAttr';
+  const attribute = 'aNumAttr';
   const createContainer = () => document.createElement('div');
   const instantSearchInstance = { templatesConfig: undefined };
   const createHelper = () =>
@@ -22,7 +22,7 @@ describe('rangeInput', () => {
         },
       },
       'indexName',
-      { disjunctiveFacets: [attributeName] }
+      { disjunctiveFacets: [attribute] }
     );
 
   afterEach(() => {
@@ -35,7 +35,7 @@ describe('rangeInput', () => {
     const results = {
       disjunctiveFacets: [
         {
-          name: attributeName,
+          name: attribute,
           stats: {
             min: 10,
             max: 500,
@@ -46,7 +46,7 @@ describe('rangeInput', () => {
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
     });
 
     widget.init({ helper, instantSearchInstance });
@@ -65,7 +65,7 @@ describe('rangeInput', () => {
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
     });
 
     widget.init({ helper, instantSearchInstance });
@@ -82,7 +82,7 @@ describe('rangeInput', () => {
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
       cssClasses: {
         root: 'custom-root',
         header: 'custom-header',
@@ -113,7 +113,7 @@ describe('rangeInput', () => {
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
       labels: {
         separator: 'custom-separator',
         submit: 'custom-submit',
@@ -134,7 +134,7 @@ describe('rangeInput', () => {
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
       min: 20,
     });
 
@@ -152,7 +152,7 @@ describe('rangeInput', () => {
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
       max: 480,
     });
 
@@ -169,7 +169,7 @@ describe('rangeInput', () => {
     const results = {
       disjunctiveFacets: [
         {
-          name: attributeName,
+          name: attribute,
           stats: {
             min: 10,
             max: 500,
@@ -178,12 +178,12 @@ describe('rangeInput', () => {
       ],
     };
 
-    helper.addNumericRefinement(attributeName, '>=', 25);
-    helper.addNumericRefinement(attributeName, '<=', 475);
+    helper.addNumericRefinement(attribute, '>=', 25);
+    helper.addNumericRefinement(attribute, '<=', 475);
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
     });
 
     widget.init({ helper, instantSearchInstance });
@@ -202,12 +202,12 @@ describe('rangeInput', () => {
     const helper = createHelper();
     const results = {};
 
-    helper.addNumericRefinement(attributeName, '>=', 10);
-    helper.addNumericRefinement(attributeName, '<=', 500);
+    helper.addNumericRefinement(attribute, '>=', 10);
+    helper.addNumericRefinement(attribute, '<=', 500);
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
       min: 10,
       max: 500,
     });
@@ -223,26 +223,6 @@ describe('rangeInput', () => {
     });
   });
 
-  it('expect to render hidden', () => {
-    const container = createContainer();
-    const helper = createHelper();
-    const results = [];
-
-    const widget = rangeInput({
-      container,
-      attributeName,
-      min: 20,
-      max: 20,
-    });
-
-    widget.init({ helper, instantSearchInstance });
-    widget.render({ results, helper });
-
-    expect(ReactDOM.render.mock.calls[0][0].props.shouldAutoHideContainer).toBe(
-      true
-    );
-  });
-
   it('expect to call refine', () => {
     const container = createContainer();
     const helper = createHelper();
@@ -251,7 +231,7 @@ describe('rangeInput', () => {
 
     const widget = rangeInput({
       container,
-      attributeName,
+      attribute,
     });
 
     // Override _refine behavior to be able to check
@@ -274,7 +254,7 @@ describe('rangeInput', () => {
 
       const widget = rangeInput({
         container,
-        attributeName,
+        attribute,
         precision: 2,
       });
 
@@ -292,7 +272,7 @@ describe('rangeInput', () => {
 
       const widget = rangeInput({
         container,
-        attributeName,
+        attribute,
         precision: 0,
       });
 
@@ -310,7 +290,7 @@ describe('rangeInput', () => {
 
       const widget = rangeInput({
         container,
-        attributeName,
+        attribute,
         precision: 1,
       });
 
@@ -324,10 +304,10 @@ describe('rangeInput', () => {
 
   describe('throws', () => {
     it('throws an exception when no container', () => {
-      expect(() => rangeInput({ attributeName: '' })).toThrow(/^Usage:/);
+      expect(() => rangeInput({ attribute: '' })).toThrow(/^Usage:/);
     });
 
-    it('throws an exception when no attributeName', () => {
+    it('throws an exception when no attribute', () => {
       expect(() =>
         rangeInput({
           container: document.createElement('div'),
diff --git a/src/widgets/range-input/range-input.js b/src/widgets/range-input/range-input.js
index 7cdf1b067a..ba2ecedb25 100644
--- a/src/widgets/range-input/range-input.js
+++ b/src/widgets/range-input/range-input.js
@@ -2,21 +2,19 @@ import React, { render } from 'preact-compat';
 import cx from 'classnames';
 import RangeInput from '../../components/RangeInput/RangeInput.js';
 import connectRange from '../../connectors/range/connectRange.js';
-import {
-  bemHelper,
-  prepareTemplateProps,
-  getContainerNode,
-} from '../../lib/utils.js';
 import defaultTemplates from './defaultTemplates.js';
 
-const bem = bemHelper('ais-range-input');
+import { prepareTemplateProps, getContainerNode } from '../../lib/utils.js';
+
+import { component } from '../../lib/suit';
+
+const suit = component('RangeInput');
 
 const renderer = ({
   containerNode,
   templates,
   cssClasses,
   labels,
-  autoHideContainer,
   collapsible,
   renderState,
 }) => (
@@ -37,7 +35,6 @@ const renderer = ({
   const [minValue, maxValue] = start;
 
   const step = 1 / Math.pow(10, widgetParams.precision);
-  const shouldAutoHideContainer = autoHideContainer && rangeMin === rangeMax;
 
   const values = {
     min: minValue !== -Infinity && minValue !== rangeMin ? minValue : undefined,
@@ -53,7 +50,6 @@ const renderer = ({
       cssClasses={cssClasses}
       labels={labels}
       refine={refine}
-      shouldAutoHideContainer={shouldAutoHideContainer}
       collapsible={collapsible}
       templateProps={renderState.templateProps}
     />,
@@ -64,14 +60,13 @@ const renderer = ({
 const usage = `Usage:
 rangeInput({
   container,
-  attributeName,
+  attribute,
   [ min ],
   [ max ],
   [ precision = 0 ],
   [ cssClasses.{root, header, body, form, fieldset, labelMin, inputMin, separator, labelMax, inputMax, submit, footer} ],
   [ templates.{header, footer} ],
   [ labels.{separator, submit} ],
-  [ autoHideContainer=true ],
   [ collapsible=false ]
 })`;
 
@@ -106,14 +101,13 @@ rangeInput({
 /**
  * @typedef {Object} RangeInputWidgetOptions
  * @property {string|HTMLElement} container Valid CSS Selector as a string or DOMElement.
- * @property {string} attributeName Name of the attribute for faceting.
+ * @property {string} attribute Name of the attribute for faceting.
  * @property {number} [min] Minimal slider value, default to automatically computed from the result set.
  * @property {number} [max] Maximal slider value, defaults to automatically computed from the result set.
  * @property {number} [precision = 0] Number of digits after decimal point to use.
  * @property {RangeInputClasses} [cssClasses] CSS classes to add.
  * @property {RangeInputTemplates} [templates] Templates to use for the widget.
  * @property {RangeInputLabels} [labels] Labels to use for the widget.
- * @property {boolean} [autoHideContainer=true] Hide the container when no refinements available.
  * @property {boolean} [collapsible=false] Hide the widget body and footer when clicking on header.
  */
 
@@ -121,7 +115,7 @@ rangeInput({
  * The range input widget allows a user to select a numeric range using a minimum and maximum input.
  *
  * @requirements
- * The attribute passed to `attributeName` must be declared as an
+ * The attribute passed to `attribute` must be declared as an
  * [attribute for faceting](https://www.algolia.com/doc/guides/searching/faceting/#declaring-attributes-for-faceting)
  * in your Algolia settings.
  *
@@ -135,7 +129,7 @@ rangeInput({
  * search.addWidget(
  *   instantsearch.widgets.rangeInput({
  *     container: '#range-input',
- *     attributeName: 'price',
+ *     attribute: 'price',
  *     labels: {
  *       separator: 'to',
  *       submit: 'Go'
@@ -148,14 +142,13 @@ rangeInput({
  */
 export default function rangeInput({
   container,
-  attributeName,
+  attribute,
   min,
   max,
   precision = 0,
   cssClasses: userCssClasses = {},
   templates = defaultTemplates,
   labels: userLabels = {},
-  autoHideContainer = true,
   collapsible = false,
 } = {}) {
   if (!container) {
@@ -171,18 +164,24 @@ export default function rangeInput({
   };
 
   const cssClasses = {
-    root: cx(bem(null), userCssClasses.root),
-    header: cx(bem('header'), userCssClasses.header),
-    body: cx(bem('body'), userCssClasses.body),
-    form: cx(bem('form'), userCssClasses.form),
-    fieldset: cx(bem('fieldset'), userCssClasses.fieldset),
-    labelMin: cx(bem('labelMin'), userCssClasses.labelMin),
-    inputMin: cx(bem('inputMin'), userCssClasses.inputMin),
-    separator: cx(bem('separator'), userCssClasses.separator),
-    labelMax: cx(bem('labelMax'), userCssClasses.labelMax),
-    inputMax: cx(bem('inputMax'), userCssClasses.inputMax),
-    submit: cx(bem('submit'), userCssClasses.submit),
-    footer: cx(bem('footer'), userCssClasses.footer),
+    root: cx(suit(), userCssClasses.root),
+    noRefinement: cx(suit({ modifierName: 'noRefinement' })),
+    form: cx(suit({ descendantName: 'form' }), userCssClasses.form),
+    label: cx(suit({ descendantName: 'label' }), userCssClasses.label),
+    input: cx(suit({ descendantName: 'input' }), userCssClasses.input),
+    inputMin: cx(
+      suit({ descendantName: 'input', modifierName: 'min' }),
+      userCssClasses.inputMin
+    ),
+    inputMax: cx(
+      suit({ descendantName: 'input', modifierName: 'max' }),
+      userCssClasses.inputMax
+    ),
+    separator: cx(
+      suit({ descendantName: 'separator' }),
+      userCssClasses.separator
+    ),
+    button: cx(suit({ descendantName: 'button' }), userCssClasses.button),
   };
 
   const specializedRenderer = renderer({
@@ -190,7 +189,6 @@ export default function rangeInput({
     cssClasses,
     templates,
     labels,
-    autoHideContainer,
     collapsible,
     renderState: {},
   });
@@ -199,7 +197,7 @@ export default function rangeInput({
     const makeWidget = connectRange(specializedRenderer);
 
     return makeWidget({
-      attributeName,
+      attribute,
       min,
       max,
       precision,
diff --git a/src/widgets/range-slider/__tests__/range-slider-test.js b/src/widgets/range-slider/__tests__/range-slider-test.js
index 479ec09a6f..64a8818232 100644
--- a/src/widgets/range-slider/__tests__/range-slider-test.js
+++ b/src/widgets/range-slider/__tests__/range-slider-test.js
@@ -6,17 +6,17 @@ const instantSearchInstance = { templatesConfig: undefined };
 
 describe('rangeSlider', () => {
   it('throws an exception when no container', () => {
-    const attributeName = '';
-    expect(() => rangeSlider({ attributeName })).toThrow(/^Usage:/);
+    const attribute = '';
+    expect(() => rangeSlider({ attribute })).toThrow(/^Usage:/);
   });
 
-  it('throws an exception when no attributeName', () => {
+  it('throws an exception when no attribute', () => {
     const container = document.createElement('div');
     expect(() => rangeSlider({ container })).toThrow(/^Usage:/);
   });
 
   describe('widget usage', () => {
-    const attributeName = 'aNumAttr';
+    const attribute = 'aNumAttr';
 
     let ReactDOM;
     let container;
@@ -48,7 +48,7 @@ describe('rangeSlider', () => {
     it('should render without results', () => {
       widget = rangeSlider({
         container,
-        attributeName,
+        attribute,
         cssClasses: { root: ['root', 'cx'] },
       });
 
@@ -63,7 +63,7 @@ describe('rangeSlider', () => {
       const results = {
         disjunctiveFacets: [
           {
-            name: attributeName,
+            name: attribute,
             stats: {
               min: 65,
               max: 65,
@@ -74,7 +74,7 @@ describe('rangeSlider', () => {
 
       widget = rangeSlider({
         container,
-        attributeName,
+        attribute,
         cssClasses: { root: ['root', 'cx'] },
       });
 
@@ -93,7 +93,7 @@ describe('rangeSlider', () => {
 
       widget = rangeSlider({
         container,
-        attributeName,
+        attribute,
         collapsible: {
           collapsed: true,
         },
@@ -111,34 +111,34 @@ describe('rangeSlider', () => {
 
     describe('min option', () => {
       it('refines when no previous configuration', () => {
-        widget = rangeSlider({ container, attributeName, min: 100 });
+        widget = rangeSlider({ container, attribute, min: 100 });
         expect(widget.getConfiguration()).toEqual({
-          disjunctiveFacets: [attributeName],
-          numericRefinements: { [attributeName]: { '>=': [100] } },
+          disjunctiveFacets: [attribute],
+          numericRefinements: { [attribute]: { '>=': [100] } },
         });
       });
 
       it('does not refine when previous configuration', () => {
         widget = rangeSlider({
           container,
-          attributeName: 'aNumAttr',
+          attribute: 'aNumAttr',
           min: 100,
         });
         expect(
           widget.getConfiguration({
-            numericRefinements: { [attributeName]: {} },
+            numericRefinements: { [attribute]: {} },
           })
         ).toEqual({
-          disjunctiveFacets: [attributeName],
+          disjunctiveFacets: [attribute],
         });
       });
 
       it('works along with max option', () => {
-        widget = rangeSlider({ container, attributeName, min: 100, max: 200 });
+        widget = rangeSlider({ container, attribute, min: 100, max: 200 });
         expect(widget.getConfiguration()).toEqual({
-          disjunctiveFacets: [attributeName],
+          disjunctiveFacets: [attribute],
           numericRefinements: {
-            [attributeName]: {
+            [attribute]: {
               '>=': [100],
               '<=': [200],
             },
@@ -147,7 +147,7 @@ describe('rangeSlider', () => {
       });
 
       it('sets the right range', () => {
-        widget = rangeSlider({ container, attributeName, min: 100, max: 200 });
+        widget = rangeSlider({ container, attribute, min: 100, max: 200 });
         helper.setState(widget.getConfiguration());
         widget.init({ helper, instantSearchInstance });
         widget.render({ results: {}, helper });
@@ -160,7 +160,7 @@ describe('rangeSlider', () => {
         const results = {
           disjunctiveFacets: [
             {
-              name: attributeName,
+              name: attribute,
               stats: {
                 min: 1.99,
                 max: 4999.98,
@@ -169,7 +169,7 @@ describe('rangeSlider', () => {
           ],
         };
 
-        widget = rangeSlider({ container, attributeName, min: 100 });
+        widget = rangeSlider({ container, attribute, min: 100 });
         helper.setState(widget.getConfiguration());
         widget.init({ helper, instantSearchInstance });
         widget.render({ results, helper });
@@ -182,21 +182,21 @@ describe('rangeSlider', () => {
 
     describe('max option', () => {
       it('refines when no previous configuration', () => {
-        widget = rangeSlider({ container, attributeName, max: 100 });
+        widget = rangeSlider({ container, attribute, max: 100 });
         expect(widget.getConfiguration()).toEqual({
-          disjunctiveFacets: [attributeName],
-          numericRefinements: { [attributeName]: { '<=': [100] } },
+          disjunctiveFacets: [attribute],
+          numericRefinements: { [attribute]: { '<=': [100] } },
         });
       });
 
       it('does not refine when previous configuration', () => {
-        widget = rangeSlider({ container, attributeName, max: 100 });
+        widget = rangeSlider({ container, attribute, max: 100 });
         expect(
           widget.getConfiguration({
-            numericRefinements: { [attributeName]: {} },
+            numericRefinements: { [attribute]: {} },
           })
         ).toEqual({
-          disjunctiveFacets: [attributeName],
+          disjunctiveFacets: [attribute],
         });
       });
 
@@ -204,7 +204,7 @@ describe('rangeSlider', () => {
         const results = {
           disjunctiveFacets: [
             {
-              name: attributeName,
+              name: attribute,
               stats: {
                 min: 1.99,
                 max: 4999.98,
@@ -213,7 +213,7 @@ describe('rangeSlider', () => {
           ],
         };
 
-        widget = rangeSlider({ container, attributeName, max: 100 });
+        widget = rangeSlider({ container, attribute, max: 100 });
         helper.setState(widget.getConfiguration());
         widget.init({ helper, instantSearchInstance });
         widget.render({ results, helper });
@@ -228,13 +228,13 @@ describe('rangeSlider', () => {
       let results;
 
       beforeEach(() => {
-        widget = rangeSlider({ container, attributeName });
+        widget = rangeSlider({ container, attribute });
         widget.init({ helper, instantSearchInstance });
 
         results = {
           disjunctiveFacets: [
             {
-              name: attributeName,
+              name: attribute,
               stats: {
                 min: 1.99,
                 max: 4999.98,
@@ -248,7 +248,7 @@ describe('rangeSlider', () => {
 
       it('configures the disjunctiveFacets', () => {
         expect(widget.getConfiguration()).toEqual({
-          disjunctiveFacets: [attributeName],
+          disjunctiveFacets: [attribute],
         });
       });
 
@@ -279,9 +279,7 @@ describe('rangeSlider', () => {
         const state1 = helper.state;
 
         expect(helper.search).toHaveBeenCalledTimes(1);
-        expect(state1).toEqual(
-          state0.addNumericRefinement(attributeName, '>=', 3)
-        );
+        expect(state1).toEqual(state0.addNumericRefinement(attribute, '>=', 3));
       });
 
       it('calls the refinement function if refined with max-1', () => {
@@ -294,7 +292,7 @@ describe('rangeSlider', () => {
 
         expect(helper.search).toHaveBeenCalledTimes(1);
         expect(state1).toEqual(
-          state0.addNumericRefinement(attributeName, '<=', 4999)
+          state0.addNumericRefinement(attribute, '<=', 4999)
         );
       });
 
@@ -309,21 +307,21 @@ describe('rangeSlider', () => {
         expect(helper.search).toHaveBeenCalledTimes(1);
         expect(state1).toEqual(
           state0
-            .addNumericRefinement(attributeName, '>=', 3)
-            .addNumericRefinement(attributeName, '<=', 4999)
+            .addNumericRefinement(attribute, '>=', 3)
+            .addNumericRefinement(attribute, '<=', 4999)
         );
       });
 
       it("expect to clamp the min value to the max range when it's greater than range", () => {
         widget = rangeSlider({
           container,
-          attributeName,
+          attribute,
         });
 
         widget.init({ helper, instantSearchInstance });
 
-        helper.addNumericRefinement(attributeName, '>=', 5550);
-        helper.addNumericRefinement(attributeName, '<=', 6000);
+        helper.addNumericRefinement(attribute, '>=', 5550);
+        helper.addNumericRefinement(attribute, '<=', 6000);
 
         widget.render({ results, helper });
 
@@ -333,13 +331,13 @@ describe('rangeSlider', () => {
       it("expect to clamp the max value to the min range when it's lower than range", () => {
         widget = rangeSlider({
           container,
-          attributeName,
+          attribute,
         });
 
         widget.init({ helper, instantSearchInstance });
 
-        helper.addNumericRefinement(attributeName, '>=', -50);
-        helper.addNumericRefinement(attributeName, '<=', 0);
+        helper.addNumericRefinement(attribute, '>=', -50);
+        helper.addNumericRefinement(attribute, '<=', 0);
 
         widget.render({ results, helper });
 
diff --git a/src/widgets/range-slider/range-slider.js b/src/widgets/range-slider/range-slider.js
index 0fd9a37d42..9a8cb33fbf 100644
--- a/src/widgets/range-slider/range-slider.js
+++ b/src/widgets/range-slider/range-slider.js
@@ -73,7 +73,7 @@ const renderer = ({
 const usage = `Usage:
 rangeSlider({
   container,
-  attributeName,
+  attribute,
   [ min ],
   [ max ],
   [ pips = true ],
@@ -116,7 +116,7 @@ rangeSlider({
 /**
  * @typedef {Object} RangeSliderWidgetOptions
  * @property  {string|HTMLElement} container CSS Selector or DOMElement to insert the widget.
- * @property  {string} attributeName Name of the attribute for faceting.
+ * @property  {string} attribute Name of the attribute for faceting.
  * @property  {boolean|RangeSliderTooltipOptions} [tooltips=true] Should we show tooltips or not.
  * The default tooltip will show the raw value.
  * You can also provide an object with a format function as an attribute.
@@ -137,7 +137,7 @@ rangeSlider({
  * results based on a single numeric range.
  *
  * @requirements
- * The attribute passed to `attributeName` must be declared as an
+ * The attribute passed to `attribute` must be declared as an
  * [attribute for faceting](https://www.algolia.com/doc/guides/searching/faceting/#declaring-attributes-for-faceting)
  * in your Algolia settings.
  *
@@ -152,7 +152,7 @@ rangeSlider({
  * search.addWidget(
  *   instantsearch.widgets.rangeSlider({
  *     container: '#price',
- *     attributeName: 'price',
+ *     attribute: 'price',
  *     templates: {
  *       header: 'Price'
  *     },
@@ -166,7 +166,7 @@ rangeSlider({
  */
 export default function rangeSlider({
   container,
-  attributeName,
+  attribute,
   min,
   max,
   templates = defaultTemplates,
@@ -206,7 +206,7 @@ export default function rangeSlider({
     const makeWidget = connectRange(specializedRenderer, () =>
       unmountComponentAtNode(containerNode)
     );
-    return makeWidget({ attributeName, min, max, precision });
+    return makeWidget({ attribute, min, max, precision });
   } catch (e) {
     throw new Error(usage);
   }