diff --git a/src/components/RangeInput/RangeInput.js b/src/components/RangeInput/RangeInput.js
index 226da6fa31..7d8c9ac963 100644
--- a/src/components/RangeInput/RangeInput.js
+++ b/src/components/RangeInput/RangeInput.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'preact-compat';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 export class RangeInput extends Component {
   constructor(props) {
@@ -36,16 +37,17 @@ export class RangeInput extends Component {
     const isDisabled = min >= max;
 
     const hasRefinements = Boolean(minValue || maxValue);
-    const rootClassNames = hasRefinements
-      ? cssClasses.root
-      : `${cssClasses.root} ${cssClasses.noRefinement}`;
+
+    const rootClassNames = cx(cssClasses.root, {
+      [cssClasses.noRefinement]: !hasRefinements,
+    });
 
     return (
       <div className={rootClassNames}>
         <form className={cssClasses.form} onSubmit={this.onSubmit}>
           <label className={cssClasses.label}>
             <input
-              className={`${cssClasses.input} ${cssClasses.inputMin}`}
+              className={cx(cssClasses.input, cssClasses.inputMin)}
               type="number"
               min={min}
               max={max}
@@ -61,7 +63,7 @@ export class RangeInput extends Component {
 
           <label className={cssClasses.label}>
             <input
-              className={`${cssClasses.input} ${cssClasses.inputMax}`}
+              className={cx(cssClasses.input, cssClasses.inputMax)}
               type="number"
               min={min}
               max={max}
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 1e6be51e92..2e08f75477 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
@@ -26,20 +26,6 @@ exports[`rangeInput expect to render with custom classNames 1`] = `
   min={0}
   refine={[Function]}
   step={1}
-  templateProps={
-    Object {
-      "templates": Object {
-        "footer": "",
-        "header": "",
-      },
-      "templatesConfig": undefined,
-      "transformData": undefined,
-      "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
-      },
-    }
-  }
   values={
     Object {
       "max": undefined,
@@ -75,20 +61,6 @@ exports[`rangeInput expect to render with custom labels 1`] = `
   min={0}
   refine={[Function]}
   step={1}
-  templateProps={
-    Object {
-      "templates": Object {
-        "footer": "",
-        "header": "",
-      },
-      "templatesConfig": undefined,
-      "transformData": undefined,
-      "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
-      },
-    }
-  }
   values={
     Object {
       "max": undefined,
@@ -124,20 +96,6 @@ exports[`rangeInput expect to render with refinement 1`] = `
   min={10}
   refine={[Function]}
   step={1}
-  templateProps={
-    Object {
-      "templates": Object {
-        "footer": "",
-        "header": "",
-      },
-      "templatesConfig": undefined,
-      "transformData": undefined,
-      "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
-      },
-    }
-  }
   values={
     Object {
       "max": 475,
@@ -173,20 +131,6 @@ exports[`rangeInput expect to render with refinement at boundaries 1`] = `
   min={10}
   refine={[Function]}
   step={1}
-  templateProps={
-    Object {
-      "templates": Object {
-        "footer": "",
-        "header": "",
-      },
-      "templatesConfig": undefined,
-      "transformData": undefined,
-      "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
-      },
-    }
-  }
   values={
     Object {
       "max": undefined,
@@ -222,20 +166,6 @@ exports[`rangeInput expect to render with results 1`] = `
   min={10}
   refine={[Function]}
   step={1}
-  templateProps={
-    Object {
-      "templates": Object {
-        "footer": "",
-        "header": "",
-      },
-      "templatesConfig": undefined,
-      "transformData": undefined,
-      "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
-      },
-    }
-  }
   values={
     Object {
       "max": undefined,
@@ -271,20 +201,6 @@ exports[`rangeInput expect to render without results 1`] = `
   min={0}
   refine={[Function]}
   step={1}
-  templateProps={
-    Object {
-      "templates": Object {
-        "footer": "",
-        "header": "",
-      },
-      "templatesConfig": undefined,
-      "transformData": undefined,
-      "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
-      },
-    }
-  }
   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 072d8994f3..95917152ee 100644
--- a/src/widgets/range-input/__tests__/range-input-test.js
+++ b/src/widgets/range-input/__tests__/range-input-test.js
@@ -13,7 +13,7 @@ jest.mock('preact-compat', () => {
 describe('rangeInput', () => {
   const attribute = 'aNumAttr';
   const createContainer = () => document.createElement('div');
-  const instantSearchInstance = { templatesConfig: undefined };
+  const instantSearchInstance = {};
   const createHelper = () =>
     new AlgoliasearchHelper(
       {
diff --git a/src/widgets/range-input/defaultTemplates.js b/src/widgets/range-input/defaultTemplates.js
deleted file mode 100644
index 05269f4007..0000000000
--- a/src/widgets/range-input/defaultTemplates.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  header: '',
-  footer: '',
-};
diff --git a/src/widgets/range-input/range-input.js b/src/widgets/range-input/range-input.js
index ba2ecedb25..db5dd2ca84 100644
--- a/src/widgets/range-input/range-input.js
+++ b/src/widgets/range-input/range-input.js
@@ -2,32 +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 defaultTemplates from './defaultTemplates.js';
-
-import { prepareTemplateProps, getContainerNode } from '../../lib/utils.js';
-
+import { getContainerNode } from '../../lib/utils.js';
 import { component } from '../../lib/suit';
 
 const suit = component('RangeInput');
 
 const renderer = ({
   containerNode,
-  templates,
   cssClasses,
   labels,
   collapsible,
   renderState,
-}) => (
-  { refine, range, start, widgetParams, instantSearchInstance },
-  isFirstRendering
-) => {
+}) => ({ refine, range, start, widgetParams }, isFirstRendering) => {
   if (isFirstRendering) {
-    renderState.templateProps = prepareTemplateProps({
-      defaultTemplates,
-      templatesConfig: instantSearchInstance.templatesConfig,
-      templates,
-    });
-
     return;
   }
 
@@ -64,8 +51,7 @@ rangeInput({
   [ min ],
   [ max ],
   [ precision = 0 ],
-  [ cssClasses.{root, header, body, form, fieldset, labelMin, inputMin, separator, labelMax, inputMax, submit, footer} ],
-  [ templates.{header, footer} ],
+  [ cssClasses.{root, form, fieldset, labelMin, inputMin, separator, labelMax, inputMax, submit} ],
   [ labels.{separator, submit} ],
   [ collapsible=false ]
 })`;
@@ -73,8 +59,6 @@ rangeInput({
 /**
  * @typedef {Object} RangeInputClasses
  * @property {string|string[]} [root] CSS class to add to the root element.
- * @property {string|string[]} [header] CSS class to add to the header element.
- * @property {string|string[]} [body] CSS class to add to the body element.
  * @property {string|string[]} [form] CSS class to add to the form element.
  * @property {string|string[]} [fieldset] CSS class to add to the fieldset element.
  * @property {string|string[]} [labelMin] CSS class to add to the min label element.
@@ -83,13 +67,6 @@ rangeInput({
  * @property {string|string[]} [labelMax] CSS class to add to the max label element.
  * @property {string|string[]} [inputMax] CSS class to add to the max input element.
  * @property {string|string[]} [submit] CSS class to add to the submit button of the form.
- * @property {string|string[]} [footer] CSS class to add to the footer element.
- */
-
-/**
- * @typedef {Object} RangeInputTemplates
- * @property {string|function} [header=""] Header template.
- * @property {string|function} [footer=""] Footer template.
  */
 
 /**
@@ -106,7 +83,6 @@ rangeInput({
  * @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} [collapsible=false] Hide the widget body and footer when clicking on header.
  */
@@ -134,9 +110,6 @@ rangeInput({
  *       separator: 'to',
  *       submit: 'Go'
  *     },
- *     templates: {
- *       header: 'Price'
- *     }
  *   })
  * );
  */
@@ -147,7 +120,6 @@ export default function rangeInput({
   max,
   precision = 0,
   cssClasses: userCssClasses = {},
-  templates = defaultTemplates,
   labels: userLabels = {},
   collapsible = false,
 } = {}) {
@@ -187,7 +159,6 @@ export default function rangeInput({
   const specializedRenderer = renderer({
     containerNode,
     cssClasses,
-    templates,
     labels,
     collapsible,
     renderState: {},