diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md
index 6592f98d72..82be1f0b52 100644
--- a/docgen/src/guides/v3-migration.md
+++ b/docgen/src/guides/v3-migration.md
@@ -788,9 +788,12 @@ Widget removed.
 
 #### Options
 
-| Before          | After       |
-| --------------- | ----------- |
-| `attributeName` | `attribute` |
+| Before             | After                     |
+| ------------------ | ------------------------- |
+| `attributeName`    | `attribute`               |
+| `labels`           | `templates`               |
+| `labels.separator` | `templates.separatorText` |
+| `labels.submit`    | `templates.submitText`    |
 
 #### CSS classes
 
diff --git a/src/components/RangeInput/RangeInput.js b/src/components/RangeInput/RangeInput.js
index 9b9eb40593..60d0a8786e 100644
--- a/src/components/RangeInput/RangeInput.js
+++ b/src/components/RangeInput/RangeInput.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'preact-compat';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import Template from '../Template/Template';
 
 class RangeInput extends Component {
   constructor(props) {
@@ -33,7 +34,7 @@ class RangeInput extends Component {
 
   render() {
     const { min: minValue, max: maxValue } = this.state;
-    const { min, max, step, cssClasses, labels } = this.props;
+    const { min, max, step, cssClasses, templateProps } = this.props;
     const isDisabled = min >= max;
 
     const hasRefinements = Boolean(minValue || maxValue);
@@ -59,7 +60,14 @@ class RangeInput extends Component {
             />
           </label>
 
-          <span className={cssClasses.separator}>{labels.separator}</span>
+          <Template
+            {...templateProps}
+            templateKey="separatorText"
+            rootTagName="span"
+            rootProps={{
+              className: cssClasses.separator,
+            }}
+          />
 
           <label className={cssClasses.label}>
             <input
@@ -75,13 +83,16 @@ class RangeInput extends Component {
             />
           </label>
 
-          <button
-            type="submit"
-            className={cssClasses.submit}
-            disabled={isDisabled}
-          >
-            {labels.submit}
-          </button>
+          <Template
+            {...templateProps}
+            templateKey="submitText"
+            rootTagName="button"
+            rootProps={{
+              type: 'submit',
+              className: cssClasses.submit,
+              disabled: isDisabled,
+            }}
+          />
         </form>
       </div>
     );
@@ -107,10 +118,12 @@ RangeInput.propTypes = {
     separator: PropTypes.string.isRequired,
     submit: PropTypes.string.isRequired,
   }).isRequired,
-  labels: PropTypes.shape({
-    separator: PropTypes.string.isRequired,
-    submit: PropTypes.string.isRequired,
-  }).isRequired,
+  templateProps: PropTypes.shape({
+    templates: PropTypes.shape({
+      separatorText: PropTypes.string.isRequired,
+      submitText: PropTypes.string.isRequired,
+    }).isRequired,
+  }),
   refine: PropTypes.func.isRequired,
 };
 
diff --git a/src/components/RangeInput/__tests__/RangeInput-test.js b/src/components/RangeInput/__tests__/RangeInput-test.js
index 5be5145f43..2af0e02b01 100644
--- a/src/components/RangeInput/__tests__/RangeInput-test.js
+++ b/src/components/RangeInput/__tests__/RangeInput-test.js
@@ -19,9 +19,11 @@ describe('RangeInput', () => {
       separator: 'separator',
       submit: 'submit',
     },
-    labels: {
-      separator: 'to',
-      submit: 'Go',
+    templatesProps: {
+      templates: {
+        separatorText: 'to',
+        submitText: 'Go',
+      },
     },
     refine: () => {},
   };
diff --git a/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.js.snap b/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.js.snap
index d1c784ded5..ebb2f3a38a 100644
--- a/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.js.snap
+++ b/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.js.snap
@@ -22,11 +22,19 @@ exports[`RangeInput expect to render 1`] = `
         type="number"
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -41,13 +49,21 @@ exports[`RangeInput expect to render 1`] = `
         type="number"
       />
     </label>
-    <button
-      className="submit"
-      disabled={false}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": false,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
@@ -74,11 +90,19 @@ exports[`RangeInput expect to render with disabled state 1`] = `
         type="number"
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -93,13 +117,21 @@ exports[`RangeInput expect to render with disabled state 1`] = `
         type="number"
       />
     </label>
-    <button
-      className="submit"
-      disabled={true}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": true,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
@@ -127,11 +159,19 @@ exports[`RangeInput expect to render with values 1`] = `
         value={20}
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -147,13 +187,21 @@ exports[`RangeInput expect to render with values 1`] = `
         value={480}
       />
     </label>
-    <button
-      className="submit"
-      disabled={false}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": false,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
@@ -180,11 +228,19 @@ exports[`RangeInput onChange expect to update the state when max change 1`] = `
         type="number"
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -200,13 +256,21 @@ exports[`RangeInput onChange expect to update the state when max change 1`] = `
         value={480}
       />
     </label>
-    <button
-      className="submit"
-      disabled={false}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": false,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
@@ -234,11 +298,19 @@ exports[`RangeInput onChange expect to update the state when min change 1`] = `
         value={20}
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -253,13 +325,21 @@ exports[`RangeInput onChange expect to update the state when min change 1`] = `
         type="number"
       />
     </label>
-    <button
-      className="submit"
-      disabled={false}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": false,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
@@ -286,11 +366,19 @@ exports[`RangeInput willReceiveProps expect to update the empty state from given
         type="number"
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -305,13 +393,21 @@ exports[`RangeInput willReceiveProps expect to update the empty state from given
         type="number"
       />
     </label>
-    <button
-      className="submit"
-      disabled={false}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": false,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
@@ -338,11 +434,19 @@ exports[`RangeInput willReceiveProps expect to update the empty state from given
         type="number"
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -357,13 +461,21 @@ exports[`RangeInput willReceiveProps expect to update the empty state from given
         type="number"
       />
     </label>
-    <button
-      className="submit"
-      disabled={false}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": false,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
@@ -391,11 +503,19 @@ exports[`RangeInput willReceiveProps expect to update the state from given props
         value={40}
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -411,13 +531,21 @@ exports[`RangeInput willReceiveProps expect to update the state from given props
         value={460}
       />
     </label>
-    <button
-      className="submit"
-      disabled={false}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": false,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
@@ -445,11 +573,19 @@ exports[`RangeInput willReceiveProps expect to update the state from given props
         value={40}
       />
     </label>
-    <span
-      className="separator"
-    >
-      to
-    </span>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "separator",
+        }
+      }
+      rootTagName="span"
+      templateKey="separatorText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
     <label
       className="label"
     >
@@ -465,13 +601,21 @@ exports[`RangeInput willReceiveProps expect to update the state from given props
         value={460}
       />
     </label>
-    <button
-      className="submit"
-      disabled={false}
-      type="submit"
-    >
-      Go
-    </button>
+    <Template
+      data={Object {}}
+      rootProps={
+        Object {
+          "className": "submit",
+          "disabled": false,
+          "type": "submit",
+        }
+      }
+      rootTagName="button"
+      templateKey="submitText"
+      templates={Object {}}
+      templatesConfig={Object {}}
+      useCustomCompileOptions={Object {}}
+    />
   </form>
 </div>
 `;
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 1dc45d2fe7..29400b84b0 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
@@ -4,27 +4,34 @@ exports[`rangeInput expect to render with custom classNames 1`] = `
 <RangeInput
   cssClasses={
     Object {
-      "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",
+      "form": "ais-RangeInput-form form",
+      "input": "ais-RangeInput-input input",
+      "inputMax": "ais-RangeInput-input--max inputMax",
+      "inputMin": "ais-RangeInput-input--min inputMin",
+      "label": "ais-RangeInput-label label",
       "noRefinement": "ais-RangeInput--noRefinement",
-      "root": "ais-RangeInput custom-root",
-      "separator": "ais-RangeInput-separator custom-separator",
-      "submit": "ais-RangeInput-submit custom-submit",
-    }
-  }
-  labels={
-    Object {
-      "separator": "to",
-      "submit": "Go",
+      "root": "ais-RangeInput root",
+      "separator": "ais-RangeInput-separator separator",
+      "submit": "ais-RangeInput-submit submit",
     }
   }
   max={0}
   min={0}
   refine={[Function]}
   step={1}
+  templateProps={
+    Object {
+      "templates": Object {
+        "separatorText": "to",
+        "submitText": "Go",
+      },
+      "templatesConfig": undefined,
+      "useCustomCompileOptions": Object {
+        "separatorText": true,
+        "submitText": true,
+      },
+    }
+  }
   values={
     Object {
       "max": undefined,
@@ -34,7 +41,7 @@ exports[`rangeInput expect to render with custom classNames 1`] = `
 />
 `;
 
-exports[`rangeInput expect to render with custom labels 1`] = `
+exports[`rangeInput expect to render with custom templates 1`] = `
 <RangeInput
   cssClasses={
     Object {
@@ -49,16 +56,23 @@ exports[`rangeInput expect to render with custom labels 1`] = `
       "submit": "ais-RangeInput-submit",
     }
   }
-  labels={
-    Object {
-      "separator": "custom-separator",
-      "submit": "custom-submit",
-    }
-  }
   max={0}
   min={0}
   refine={[Function]}
   step={1}
+  templateProps={
+    Object {
+      "templates": Object {
+        "separatorText": "custom separator",
+        "submitText": "custom submit",
+      },
+      "templatesConfig": undefined,
+      "useCustomCompileOptions": Object {
+        "separatorText": true,
+        "submitText": true,
+      },
+    }
+  }
   values={
     Object {
       "max": undefined,
@@ -83,16 +97,23 @@ exports[`rangeInput expect to render with refinement 1`] = `
       "submit": "ais-RangeInput-submit",
     }
   }
-  labels={
-    Object {
-      "separator": "to",
-      "submit": "Go",
-    }
-  }
   max={500}
   min={10}
   refine={[Function]}
   step={1}
+  templateProps={
+    Object {
+      "templates": Object {
+        "separatorText": "to",
+        "submitText": "Go",
+      },
+      "templatesConfig": undefined,
+      "useCustomCompileOptions": Object {
+        "separatorText": true,
+        "submitText": true,
+      },
+    }
+  }
   values={
     Object {
       "max": 475,
@@ -117,16 +138,23 @@ exports[`rangeInput expect to render with refinement at boundaries 1`] = `
       "submit": "ais-RangeInput-submit",
     }
   }
-  labels={
-    Object {
-      "separator": "to",
-      "submit": "Go",
-    }
-  }
   max={500}
   min={10}
   refine={[Function]}
   step={1}
+  templateProps={
+    Object {
+      "templates": Object {
+        "separatorText": "to",
+        "submitText": "Go",
+      },
+      "templatesConfig": undefined,
+      "useCustomCompileOptions": Object {
+        "separatorText": true,
+        "submitText": true,
+      },
+    }
+  }
   values={
     Object {
       "max": undefined,
@@ -151,16 +179,23 @@ exports[`rangeInput expect to render with results 1`] = `
       "submit": "ais-RangeInput-submit",
     }
   }
-  labels={
-    Object {
-      "separator": "to",
-      "submit": "Go",
-    }
-  }
   max={500}
   min={10}
   refine={[Function]}
   step={1}
+  templateProps={
+    Object {
+      "templates": Object {
+        "separatorText": "to",
+        "submitText": "Go",
+      },
+      "templatesConfig": undefined,
+      "useCustomCompileOptions": Object {
+        "separatorText": true,
+        "submitText": true,
+      },
+    }
+  }
   values={
     Object {
       "max": undefined,
@@ -185,16 +220,23 @@ exports[`rangeInput expect to render without results 1`] = `
       "submit": "ais-RangeInput-submit",
     }
   }
-  labels={
-    Object {
-      "separator": "to",
-      "submit": "Go",
-    }
-  }
   max={0}
   min={0}
   refine={[Function]}
   step={1}
+  templateProps={
+    Object {
+      "templates": Object {
+        "separatorText": "to",
+        "submitText": "Go",
+      },
+      "templatesConfig": undefined,
+      "useCustomCompileOptions": Object {
+        "separatorText": true,
+        "submitText": true,
+      },
+    }
+  }
   values={
     Object {
       "max": undefined,
diff --git a/src/widgets/range-input/__tests__/range-input-test.js b/src/widgets/range-input/__tests__/range-input-test.js
index 95917152ee..cb46e7c177 100644
--- a/src/widgets/range-input/__tests__/range-input-test.js
+++ b/src/widgets/range-input/__tests__/range-input-test.js
@@ -84,18 +84,15 @@ describe('rangeInput', () => {
       container,
       attribute,
       cssClasses: {
-        root: 'custom-root',
-        header: 'custom-header',
-        body: 'custom-body',
-        form: 'custom-form',
-        fieldset: 'custom-fieldset',
-        labelMin: 'custom-labelMin',
-        inputMin: 'custom-inputMin',
-        separator: 'custom-separator',
-        labelMax: 'custom-labelMax',
-        inputMax: 'custom-inputMax',
-        submit: 'custom-submit',
-        footer: 'custom-footer',
+        root: 'root',
+        noRefinement: 'noRefinement',
+        form: 'form',
+        label: 'label',
+        input: 'input',
+        inputMin: 'inputMin',
+        inputMax: 'inputMax',
+        separator: 'separator',
+        submit: 'submit',
       },
     });
 
@@ -106,7 +103,7 @@ describe('rangeInput', () => {
     expect(ReactDOM.render.mock.calls[0][0]).toMatchSnapshot();
   });
 
-  it('expect to render with custom labels', () => {
+  it('expect to render with custom templates', () => {
     const container = createContainer();
     const helper = createHelper();
     const results = [];
@@ -114,9 +111,9 @@ describe('rangeInput', () => {
     const widget = rangeInput({
       container,
       attribute,
-      labels: {
-        separator: 'custom-separator',
-        submit: 'custom-submit',
+      templates: {
+        separatorText: 'custom separator',
+        submitText: 'custom submit',
       },
     });
 
diff --git a/src/widgets/range-input/range-input.js b/src/widgets/range-input/range-input.js
index ee0ca8bf2a..1fb00e5afb 100644
--- a/src/widgets/range-input/range-input.js
+++ b/src/widgets/range-input/range-input.js
@@ -2,16 +2,20 @@ 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 { getContainerNode } from '../../lib/utils.js';
+import { prepareTemplateProps, getContainerNode } from '../../lib/utils.js';
 import { component } from '../../lib/suit';
 
 const suit = component('RangeInput');
 
-const renderer = ({ containerNode, cssClasses, labels, renderState }) => (
-  { refine, range, start, widgetParams },
+const renderer = ({ containerNode, cssClasses, renderState, templates }) => (
+  { refine, range, start, widgetParams, instantSearchInstance },
   isFirstRendering
 ) => {
   if (isFirstRendering) {
+    renderState.templateProps = prepareTemplateProps({
+      templatesConfig: instantSearchInstance.templatesConfig,
+      templates,
+    });
     return;
   }
 
@@ -32,7 +36,6 @@ const renderer = ({ containerNode, cssClasses, labels, renderState }) => (
       step={step}
       values={values}
       cssClasses={cssClasses}
-      labels={labels}
       refine={refine}
       templateProps={renderState.templateProps}
     />,
@@ -47,8 +50,8 @@ rangeInput({
   [ min ],
   [ max ],
   [ precision = 0 ],
+  [ templates.{separatorText, submitText} ],
   [ cssClasses.{root, noRefinement, form, label, input, inputMin, inputMax, separator, submit} ],
-  [ labels.{separator, submit} ],
 })`;
 
 /**
@@ -65,9 +68,9 @@ rangeInput({
  */
 
 /**
- * @typedef {Object} RangeInputLabels
- * @property {string} [separator="to"] Separator label, between min and max.
- * @property {string} [submit="Go"] Button label.
+ * @typedef {Object} RangeInputTemplates
+ * @property {string} [separatorText = "to"] The label of the separator, between min and max.
+ * @property {string} [submitText = "Go"] The label of the submit button.
  */
 
 /**
@@ -77,8 +80,8 @@ rangeInput({
  * @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 {RangeInputTemplates} [templates] Labels to use for the widget.
  * @property {RangeInputClasses} [cssClasses] CSS classes to add.
- * @property {RangeInputLabels} [labels] Labels to use for the widget.
  */
 
 /**
@@ -100,9 +103,9 @@ rangeInput({
  *   instantsearch.widgets.rangeInput({
  *     container: '#range-input',
  *     attribute: 'price',
- *     labels: {
- *       separator: 'to',
- *       submit: 'Go'
+ *     templates: {
+ *       separatorText: 'to',
+ *       submitText: 'Go'
  *     },
  *   })
  * );
@@ -114,7 +117,7 @@ export default function rangeInput({
   max,
   precision = 0,
   cssClasses: userCssClasses = {},
-  labels: userLabels = {},
+  templates: userTemplates = {},
 } = {}) {
   if (!container) {
     throw new Error(usage);
@@ -122,10 +125,10 @@ export default function rangeInput({
 
   const containerNode = getContainerNode(container);
 
-  const labels = {
-    separator: 'to',
-    submit: 'Go',
-    ...userLabels,
+  const templates = {
+    separatorText: 'to',
+    submitText: 'Go',
+    ...userTemplates,
   };
 
   const cssClasses = {
@@ -152,7 +155,7 @@ export default function rangeInput({
   const specializedRenderer = renderer({
     containerNode,
     cssClasses,
-    labels,
+    templates,
     renderState: {},
   });
 
diff --git a/storybook/app/builtin/stories/range-input.stories.js b/storybook/app/builtin/stories/range-input.stories.js
index b0c5fa0f7b..5963fe660c 100644
--- a/storybook/app/builtin/stories/range-input.stories.js
+++ b/storybook/app/builtin/stories/range-input.stories.js
@@ -15,9 +15,6 @@ export default () => {
           instantsearch.widgets.rangeInput({
             container,
             attribute: 'price',
-            templates: {
-              header: 'Range input',
-            },
           })
         );
       })
@@ -31,9 +28,6 @@ export default () => {
             attribute: 'price',
             min: 500,
             max: 0,
-            templates: {
-              header: 'Range input',
-            },
           })
         );
       })
@@ -46,9 +40,6 @@ export default () => {
             container,
             attribute: 'price',
             precision: 2,
-            templates: {
-              header: 'Range input',
-            },
           })
         );
       })
@@ -61,9 +52,6 @@ export default () => {
             container,
             attribute: 'price',
             min: 10,
-            templates: {
-              header: 'Range input',
-            },
           })
         );
       })
@@ -76,15 +64,25 @@ export default () => {
             container,
             attribute: 'price',
             max: 500,
-            templates: {
-              header: 'Range input',
-            },
           })
         );
       })
     )
     .add(
       'with min & max boundaries',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeInput({
+            container,
+            attribute: 'price',
+            min: 10,
+            max: 500,
+          })
+        );
+      })
+    )
+    .add(
+      'with templates',
       wrapWithHits(container => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
@@ -93,7 +91,8 @@ export default () => {
             min: 10,
             max: 500,
             templates: {
-              header: 'Range input',
+              separatorText: '→',
+              submitText: 'Refine',
             },
           })
         );