From 56fae30033ffffdee027916b87ec0c5852b9004b Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 23 Sep 2020 20:09:55 +0200
Subject: [PATCH] [Slider] Create unstyled version and migrate to emotion &
 styled-components (#22435)

---
 .codesandbox/ci.json                          |   6 +-
 babel.config.js                               |   2 +
 docs/babel.config.js                          |   4 +
 docs/next.config.js                           |   3 +
 docs/package.json                             |   6 +
 docs/pages/_app.js                            |  39 +-
 docs/pages/_document.js                       |  93 +-
 docs/pages/api-docs/slider-styled.js          |  15 +
 docs/pages/api-docs/slider-styled.md          |  33 +
 docs/pages/api-docs/slider-unstyled.js        |  15 +
 docs/pages/api-docs/slider-unstyled.md        |  58 ++
 docs/pages/api-docs/slider.md                 |   1 +
 docs/pages/components/slider-styled.js        |  28 +
 docs/pages/components/slider.js               |   4 +
 docs/pages/performance/slider-emotion.js      |  25 +
 docs/pages/performance/slider-jss.js          |  25 +
 docs/src/modules/components/AppFrame.js       |   4 +
 docs/src/modules/utils/RtlContext.js          |   8 +
 docs/src/modules/utils/helpers.js             |   2 +
 docs/src/pages.js                             |   1 +
 .../slider-styled/ContinuousSlider.js         |  49 +
 .../slider-styled/ContinuousSlider.tsx        |  52 +
 .../slider-styled/CustomizedSlider.js         | 210 ++++
 .../slider-styled/CustomizedSlider.tsx        | 222 +++++
 .../slider-styled/DiscreteSlider.js           |  50 +
 .../slider-styled/DiscreteSlider.tsx          |  50 +
 .../slider-styled/DiscreteSliderLabel.js      |  56 ++
 .../slider-styled/DiscreteSliderLabel.tsx     |  58 ++
 .../slider-styled/DiscreteSliderMarks.js      |  56 ++
 .../slider-styled/DiscreteSliderMarks.tsx     |  58 ++
 .../slider-styled/DiscreteSliderSteps.js      |  36 +
 .../slider-styled/DiscreteSliderSteps.tsx     |  36 +
 .../slider-styled/DiscreteSliderValues.js     |  58 ++
 .../slider-styled/DiscreteSliderValues.tsx    |  58 ++
 .../components/slider-styled/InputSlider.js   |  73 ++
 .../components/slider-styled/InputSlider.tsx  |  78 ++
 .../slider-styled/NonLinearSlider.js          |  39 +
 .../slider-styled/NonLinearSlider.tsx         |  42 +
 .../components/slider-styled/RangeSlider.js   |  38 +
 .../components/slider-styled/RangeSlider.tsx  |  41 +
 .../slider-styled/TrackFalseSlider.js         |  66 ++
 .../slider-styled/TrackFalseSlider.tsx        |  68 ++
 .../slider-styled/TrackInvertedSlider.js      |  66 ++
 .../slider-styled/TrackInvertedSlider.tsx     |  68 ++
 .../slider-styled/UnstyledSlider.js           |  63 ++
 .../slider-styled/UnstyledSlider.tsx          |  63 ++
 .../slider-styled/VerticalSlider.js           |  67 ++
 .../slider-styled/VerticalSlider.tsx          |  67 ++
 .../components/slider-styled/slider-styled.md | 117 +++
 .../guides/right-to-left/RtlOptOutStylis.js   |  32 +
 .../guides/right-to-left/RtlOptOutStylis.tsx  |  32 +
 .../guides/right-to-left/RtlOptOutStylist.js  |  32 +
 .../guides/right-to-left/right-to-left.md     |  66 +-
 framer/scripts/templates/slider.txt           |   2 +-
 .../src/SliderStyled/SliderStyled.d.ts        |  36 +
 .../src/SliderStyled/SliderStyled.js          | 316 ++++++
 .../src/SliderStyled/SliderStyled.spec.tsx    |  16 +
 .../src/SliderStyled/SliderStyled.test.js     | 793 +++++++++++++++
 .../src/SliderStyled/ValueLabelStyled.js      |  75 ++
 .../src/SliderStyled/index.d.ts               |   2 +
 .../material-ui-lab/src/SliderStyled/index.js |   1 +
 .../src/SliderUnstyled/SliderUnstyled.d.ts    | 207 ++++
 .../src/SliderUnstyled/SliderUnstyled.js      | 936 ++++++++++++++++++
 .../src/SliderUnstyled/SliderUnstyled.test.js |  19 +
 .../src/SliderUnstyled/ValueLabelUnstyled.js  |  49 +
 .../src/SliderUnstyled/index.d.ts             |   2 +
 .../src/SliderUnstyled/index.js               |   1 +
 .../material-ui-styled-engine-sc/README.md    |  22 +
 .../material-ui-styled-engine-sc/package.json |  57 ++
 .../src/index.d.ts                            |   2 +
 .../material-ui-styled-engine-sc/src/index.js |  12 +
 .../tsconfig.json                             |   4 +
 packages/material-ui-styled-engine/README.md  |   3 +
 .../material-ui-styled-engine/package.json    |  52 +
 .../material-ui-styled-engine/src/index.d.ts  |   2 +
 .../material-ui-styled-engine/src/index.js    |   1 +
 .../material-ui-styled-engine/tsconfig.json   |   4 +
 packages/material-ui-styles/src/index.d.ts    |   3 +
 packages/material-ui-styles/src/index.js      |   3 +
 packages/material-ui/package.json             |   3 +
 packages/material-ui/src/Slider/Slider.d.ts   |   1 +
 packages/material-ui/src/styles/index.d.ts    |   2 +
 packages/material-ui/src/styles/index.js      |   2 +
 .../material-ui/src/styles/muiStyled.d.ts     | 208 ++++
 packages/material-ui/src/styles/muiStyled.js  |  80 ++
 .../material-ui/src/styles/useThemeProps.d.ts |  15 +
 .../material-ui/src/styles/useThemeProps.js   |  20 +
 scripts/sizeSnapshot/webpack.config.js        |   8 +
 tsconfig.json                                 |   4 +
 webpackBaseConfig.js                          |   8 +
 yarn.lock                                     |  12 +
 91 files changed, 5477 insertions(+), 45 deletions(-)
 create mode 100644 docs/pages/api-docs/slider-styled.js
 create mode 100644 docs/pages/api-docs/slider-styled.md
 create mode 100644 docs/pages/api-docs/slider-unstyled.js
 create mode 100644 docs/pages/api-docs/slider-unstyled.md
 create mode 100644 docs/pages/components/slider-styled.js
 create mode 100644 docs/pages/performance/slider-emotion.js
 create mode 100644 docs/pages/performance/slider-jss.js
 create mode 100644 docs/src/modules/utils/RtlContext.js
 create mode 100644 docs/src/pages/components/slider-styled/ContinuousSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/ContinuousSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/CustomizedSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/CustomizedSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderLabel.js
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderMarks.js
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderSteps.js
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderValues.js
 create mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx
 create mode 100644 docs/src/pages/components/slider-styled/InputSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/InputSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/NonLinearSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/NonLinearSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/RangeSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/RangeSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/TrackFalseSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/TrackFalseSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/TrackInvertedSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/TrackInvertedSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/UnstyledSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/UnstyledSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/VerticalSlider.js
 create mode 100644 docs/src/pages/components/slider-styled/VerticalSlider.tsx
 create mode 100644 docs/src/pages/components/slider-styled/slider-styled.md
 create mode 100644 docs/src/pages/guides/right-to-left/RtlOptOutStylis.js
 create mode 100644 docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx
 create mode 100644 docs/src/pages/guides/right-to-left/RtlOptOutStylist.js
 create mode 100644 packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts
 create mode 100644 packages/material-ui-lab/src/SliderStyled/SliderStyled.js
 create mode 100644 packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx
 create mode 100644 packages/material-ui-lab/src/SliderStyled/SliderStyled.test.js
 create mode 100644 packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js
 create mode 100644 packages/material-ui-lab/src/SliderStyled/index.d.ts
 create mode 100644 packages/material-ui-lab/src/SliderStyled/index.js
 create mode 100644 packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
 create mode 100644 packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
 create mode 100644 packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.test.js
 create mode 100644 packages/material-ui-lab/src/SliderUnstyled/ValueLabelUnstyled.js
 create mode 100644 packages/material-ui-lab/src/SliderUnstyled/index.d.ts
 create mode 100644 packages/material-ui-lab/src/SliderUnstyled/index.js
 create mode 100644 packages/material-ui-styled-engine-sc/README.md
 create mode 100644 packages/material-ui-styled-engine-sc/package.json
 create mode 100644 packages/material-ui-styled-engine-sc/src/index.d.ts
 create mode 100644 packages/material-ui-styled-engine-sc/src/index.js
 create mode 100644 packages/material-ui-styled-engine-sc/tsconfig.json
 create mode 100644 packages/material-ui-styled-engine/README.md
 create mode 100644 packages/material-ui-styled-engine/package.json
 create mode 100644 packages/material-ui-styled-engine/src/index.d.ts
 create mode 100644 packages/material-ui-styled-engine/src/index.js
 create mode 100644 packages/material-ui-styled-engine/tsconfig.json
 create mode 100644 packages/material-ui/src/styles/muiStyled.d.ts
 create mode 100644 packages/material-ui/src/styles/muiStyled.js
 create mode 100644 packages/material-ui/src/styles/useThemeProps.d.ts
 create mode 100644 packages/material-ui/src/styles/useThemeProps.js

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index f1f80be03d4c90..fa2d24b4522891 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -7,13 +7,17 @@
     "packages/material-ui-styles",
     "packages/material-ui-system",
     "packages/material-ui-types",
-    "packages/material-ui-utils"
+    "packages/material-ui-utils",
+    "packages/material-ui-styled-engine",
+    "packages/material-ui-styled-engine-sc"
   ],
   "publishDirectory": {
     "@material-ui/core": "packages/material-ui/build",
     "@material-ui/icons": "packages/material-ui-icons/build",
     "@material-ui/lab": "packages/material-ui-lab/build",
     "@material-ui/styles": "packages/material-ui-styles/build",
+    "@material-ui/styled-engine": "packages/material-ui-styled-engine/build",
+    "@material-ui/styled-engine-sc": "packages/material-ui-styled-engine-sc/build",
     "@material-ui/system": "packages/material-ui-system/build",
     "@material-ui/types": "packages/material-ui-types",
     "@material-ui/utils": "packages/material-ui-utils/build"
diff --git a/babel.config.js b/babel.config.js
index 162d469804993a..30bfea34532466 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -27,6 +27,8 @@ const defaultAlias = {
   '@material-ui/docs': './packages/material-ui-docs/src',
   '@material-ui/icons': './packages/material-ui-icons/src',
   '@material-ui/lab': './packages/material-ui-lab/src',
+  '@material-ui/styled-engine': './packages/material-ui-styled-engine/src',
+  '@material-ui/styled-engine-sc': './packages/material-ui-styled-engine-sc/src',
   '@material-ui/styles': './packages/material-ui-styles/src',
   '@material-ui/system': './packages/material-ui-system/src',
   '@material-ui/utils': './packages/material-ui-utils/src',
diff --git a/docs/babel.config.js b/docs/babel.config.js
index 5b3c1a4a066b8c..1c3513f83bc45a 100644
--- a/docs/babel.config.js
+++ b/docs/babel.config.js
@@ -19,6 +19,10 @@ const alias = {
   '@material-ui/icons': '../packages/material-ui-icons/src',
   '@material-ui/lab': '../packages/material-ui-lab/src',
   '@material-ui/styles': '../packages/material-ui-styles/src',
+  '@material-ui/styled-engine-sc': '../packages/material-ui-styled-engine-sc/src',
+  // Swap the comments on the next two lines for using the styled-components as style engine
+  '@material-ui/styled-engine': '../packages/material-ui-styled-engine/src',
+  // '@material-ui/styled-engine': '../packages/material-ui-styled-engine-sc/src',
   '@material-ui/system': '../packages/material-ui-system/src',
   '@material-ui/utils': '../packages/material-ui-utils/src',
   docs: './',
diff --git a/docs/next.config.js b/docs/next.config.js
index 2bad5c996578c6..009b0985ae31f1 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -115,6 +115,9 @@ module.exports = {
                         '@material-ui/docs': '../packages/material-ui-docs/src',
                         '@material-ui/icons': '../packages/material-ui-icons/src',
                         '@material-ui/lab': '../packages/material-ui-lab/src',
+                        '@material-ui/styled-engine': '../packages/material-ui-styled-engine/src',
+                        '@material-ui/styled-engine-sc':
+                          '../packages/material-ui-styled-engine-sc/src',
                         '@material-ui/styles': '../packages/material-ui-styles/src',
                         '@material-ui/system': '../packages/material-ui-system/src',
                         '@material-ui/utils': '../packages/material-ui-utils/src',
diff --git a/docs/package.json b/docs/package.json
index 22a48d634d00a1..7e5da2a1b36390 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,6 +22,7 @@
     "@babel/plugin-transform-object-assign": "^7.10.1",
     "@babel/runtime-corejs2": "^7.10.2",
     "@date-io/core": "^1.3.9",
+    "@emotion/cache": "^10.0.27",
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
@@ -32,6 +33,8 @@
     "@material-ui/icons": "^5.0.0-alpha.1",
     "@material-ui/lab": "^5.0.0-alpha.1",
     "@material-ui/pickers": "^4.0.0-alpha.11",
+    "@material-ui/styled-engine": "^5.0.0-alpha.1",
+    "@material-ui/styled-engine-sc": "^5.0.0-alpha.1",
     "@material-ui/styles": "^5.0.0-alpha.1",
     "@material-ui/system": "^5.0.0-alpha.1",
     "@material-ui/types": "^5.0.0",
@@ -68,6 +71,8 @@
     "date-fns": "^2.15.0",
     "docsearch.js": "^2.6.3",
     "doctrine": "^3.0.0",
+    "emotion-server": "^10.0.27",
+    "emotion-theming": "^10.0.27",
     "express": "^4.17.1",
     "fg-loadcss": "^2.0.1",
     "final-form": "^4.18.5",
@@ -110,6 +115,7 @@
     "redux-logger": "^3.0.6",
     "rimraf": "^3.0.0",
     "styled-components": "^5.0.0",
+    "stylis-plugin-rtl": "^1.0.0",
     "webfontloader": "^1.6.28",
     "webpack": "^4.41.0",
     "webpack-bundle-analyzer": "^3.5.1"
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 68494174449b7a..5f630b1c1ce66b 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -8,7 +8,11 @@ import NextHead from 'next/head';
 import PropTypes from 'prop-types';
 import acceptLanguage from 'accept-language';
 import { create } from 'jss';
-import rtl from 'jss-rtl';
+import jssRtl from 'jss-rtl';
+import { StyleSheetManager } from 'styled-components';
+import { CacheProvider } from '@emotion/core';
+import createCache from '@emotion/cache';
+import rtlPlugin from 'stylis-plugin-rtl';
 import { useRouter } from 'next/router';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
 import pages from 'docs/src/pages';
@@ -16,13 +20,14 @@ import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
 import loadScript from 'docs/src/modules/utils/loadScript';
+import RtlContext from 'docs/src/modules/utils/RtlContext';
 import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
 
 // Configure JSS
 const jss = create({
-  plugins: [...jssPreset().plugins, rtl()],
+  plugins: [...jssPreset().plugins, jssRtl()],
   insertionPoint: process.browser ? document.querySelector('#insertion-point-jss') : null,
 });
 
@@ -275,6 +280,17 @@ function findActivePage(currentPages, pathname) {
   return activePage;
 }
 
+// Cache for the ltr version of the styles
+const cacheLtr = createCache();
+cacheLtr.compat = true;
+
+// Cache for the rtl version of the styles
+const cacheRtl = createCache({
+  key: 'rtl',
+  stylisPlugins: [rtlPlugin],
+});
+cacheRtl.compat = true;
+
 function AppWrapper(props) {
   const { children, pageProps } = props;
 
@@ -283,6 +299,9 @@ function AppWrapper(props) {
     initRedux({ options: { userLanguage: pageProps.userLanguage } }),
   );
 
+  const [rtl, setRtl] = React.useState(false);
+  const rtlContextValue = { rtl, setRtl };
+
   React.useEffect(() => {
     loadDependencies();
     registerServiceWorker();
@@ -313,11 +332,17 @@ function AppWrapper(props) {
         ))}
       </NextHead>
       <ReduxProvider store={redux}>
-        <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
-          <StylesProvider jss={jss}>
-            <ThemeProvider>{children}</ThemeProvider>
-          </StylesProvider>
-        </PageContext.Provider>
+        <RtlContext.Provider value={rtlContextValue}>
+          <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
+            <StyleSheetManager stylisPlugins={rtl ? [rtlPlugin] : []}>
+              <CacheProvider value={rtl ? cacheRtl : cacheLtr}>
+                <StylesProvider jss={jss}>
+                  <ThemeProvider>{children}</ThemeProvider>
+                </StylesProvider>
+              </CacheProvider>
+            </StyleSheetManager>
+          </PageContext.Provider>
+        </RtlContext.Provider>
         <LanguageNegotiation />
         <Analytics />
       </ReduxProvider>
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 84aa2b00839faa..0229e37934d88f 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { ServerStyleSheets } from '@material-ui/styles';
+import { ServerStyleSheet } from 'styled-components';
+import { extractCritical } from 'emotion-server';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
@@ -92,55 +94,78 @@ export default class MyDocument extends Document {
   }
 }
 
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
 MyDocument.getInitialProps = async (ctx) => {
   // Resolution order
   //
   // On the server:
-  // 1. page.getInitialProps
-  // 2. document.getInitialProps
-  // 3. page.render
-  // 4. document.render
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
   //
   // On the server with error:
-  // 2. document.getInitialProps
+  // 1. document.getInitialProps
+  // 2. app.render
   // 3. page.render
   // 4. document.render
   //
   // On the client
-  // 1. page.getInitialProps
-  // 3. page.render
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
 
   // Render app and page and get the context of the page with collected side effects.
-  const sheets = new ServerStyleSheets();
+  const materialSheets = new ServerStyleSheets();
+  const styledComponentsSheet = new ServerStyleSheet();
   const originalRenderPage = ctx.renderPage;
 
-  ctx.renderPage = () =>
-    originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
-    });
+  try {
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => (props) =>
+          styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />)),
+      });
 
-  const initialProps = await Document.getInitialProps(ctx);
+    const initialProps = await Document.getInitialProps(ctx);
+    const emotionStyles = extractCritical(initialProps.html);
 
-  let css = sheets.toString();
-  // It might be undefined, e.g. after an error.
-  if (css && process.env.NODE_ENV === 'production') {
-    const result1 = await prefixer.process(css, { from: undefined });
-    css = result1.css;
-    css = cleanCSS.minify(css).styles;
-  }
+    let css = materialSheets.toString();
+    // It might be undefined, e.g. after an error.
+    if (css && process.env.NODE_ENV === 'production') {
+      const result1 = await prefixer.process(css, { from: undefined });
+      css = result1.css;
+      css = cleanCSS.minify(css).styles;
+    }
 
-  return {
-    ...initialProps,
-    canonical: pathnameToLanguage(ctx.req.url).canonical,
-    userLanguage: ctx.query.userLanguage || 'en',
-    styles: [
-      ...React.Children.toArray(initialProps.styles),
-      <style
-        id="jss-server-side"
-        key="jss-server-side"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: css }}
-      />,
-    ],
-  };
+    return {
+      ...initialProps,
+      canonical: pathnameToLanguage(ctx.req.url).canonical,
+      userLanguage: ctx.query.userLanguage || 'en',
+      // Styles fragment is rendered after the app and page rendering finish.
+      styles: [
+        ...React.Children.toArray(initialProps.styles),
+        <style
+          id="jss-server-side"
+          key="jss-server-side"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: css }}
+        />,
+        <style
+          id="emotion-server-side"
+          key="emotion-server-side"
+          data-emotion-css={emotionStyles.ids.join(' ')}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: emotionStyles.css }}
+        />,
+        styledComponentsSheet.getStyleElement(),
+      ],
+    };
+  } finally {
+    styledComponentsSheet.seal();
+  }
 };
diff --git a/docs/pages/api-docs/slider-styled.js b/docs/pages/api-docs/slider-styled.js
new file mode 100644
index 00000000000000..65bdb411b49815
--- /dev/null
+++ b/docs/pages/api-docs/slider-styled.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/slider-styled';
+const requireRaw = require.context('!raw-loader!./', false, /\/slider-styled\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md
new file mode 100644
index 00000000000000..55fd1513227150
--- /dev/null
+++ b/docs/pages/api-docs/slider-styled.md
@@ -0,0 +1,33 @@
+---
+filename: /packages/material-ui-lab/src/SliderStyled/SliderStyled.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# SliderStyled API
+
+<p class="description">The API documentation of the SliderStyled React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import SliderStyled from '@material-ui/lab/SliderStyled';
+// or
+import { SliderStyled } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
diff --git a/docs/pages/api-docs/slider-unstyled.js b/docs/pages/api-docs/slider-unstyled.js
new file mode 100644
index 00000000000000..6558f78ffa2a18
--- /dev/null
+++ b/docs/pages/api-docs/slider-unstyled.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/slider-unstyled';
+const requireRaw = require.context('!raw-loader!./', false, /\/slider-unstyled\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md
new file mode 100644
index 00000000000000..7975e20b473c06
--- /dev/null
+++ b/docs/pages/api-docs/slider-unstyled.md
@@ -0,0 +1,58 @@
+---
+filename: /packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# SliderUnstyled API
+
+<p class="description">The API documentation of the SliderUnstyled React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import SliderUnstyled from '@material-ui/lab/SliderUnstyled';
+// or
+import { SliderUnstyled } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">aria-label</span> | <span class="prop-type">string</span> |  | The label of the slider. |
+| <span class="prop-name">aria-labelledby</span> | <span class="prop-type">string</span> |  | The id of the element containing a label for the slider. |
+| <span class="prop-name">aria-valuetext</span> | <span class="prop-type">string</span> |  | A string value that provides a user-friendly name for the current value of the slider. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
+| <span class="prop-name">defaultValue</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The default element value. Use when the component is not controlled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the slider will be disabled. |
+| <span class="prop-name">getAriaLabel</span> | <span class="prop-type">func</span> |  | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.<br><br>**Signature:**<br>`function(index: number) => string`<br>*index:* The thumb label's index to format. |
+| <span class="prop-name">getAriaValueText</span> | <span class="prop-type">func</span> |  | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.<br><br>**Signature:**<br>`function(value: number, index: number) => string`<br>*value:* The thumb label's value to format.<br>*index:* The thumb label's index to format. |
+| <span class="prop-name">isRtl</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Indicates whether the theme context has rtl direction. It is set automatically. |
+| <span class="prop-name">marks</span> | <span class="prop-type">Array&lt;{ label?: node, value: number }&gt;<br>&#124;&nbsp;bool</span> | <span class="prop-default">false</span> | Marks indicate predetermined values to which the user can move the slider. If `true` the marks will be spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. |
+| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">100</span> | The maximum allowed value of the slider. Should not be equal to min. |
+| <span class="prop-name">min</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The minimum allowed value of the slider. Should not be equal to max. |
+| <span class="prop-name">name</span> | <span class="prop-type">string</span> |  | Name attribute of the hidden `input` element. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the slider's value changed.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*value:* The new value. |
+| <span class="prop-name">onChangeCommitted</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the `mouseup` is triggered.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*value:* The new value. |
+| <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
+| <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | A transformation function, to change the scale of the slider. |
+| <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
+| <span class="prop-name">ThumbComponent</span> | <span class="prop-type">elementType</span> |  | The component used to display the value label. |
+| <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> | <span class="prop-default">'normal'</span> | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
+| <span class="prop-name">value</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
+| <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> | <span class="prop-default">'off'</span> | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
+| <span class="prop-name">valueLabelFormat</span> | <span class="prop-type">func<br>&#124;&nbsp;string</span> | <span class="prop-default">(x) => x</span> | The format function the value label's value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label's value to format - {number} index The value label's index to format |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
diff --git a/docs/pages/api-docs/slider.md b/docs/pages/api-docs/slider.md
index e7ff9de5c21170..192124ca3506ff 100644
--- a/docs/pages/api-docs/slider.md
+++ b/docs/pages/api-docs/slider.md
@@ -94,4 +94,5 @@ If that's not sufficient, you can check the [implementation of the component](ht
 ## Demos
 
 - [Slider](/components/slider/)
+- [Slider Styled](/components/slider-styled/)
 
diff --git a/docs/pages/components/slider-styled.js b/docs/pages/components/slider-styled.js
new file mode 100644
index 00000000000000..7ddf45ac7dff81
--- /dev/null
+++ b/docs/pages/components/slider-styled.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/slider-styled';
+const requireDemo = require.context(
+  'docs/src/pages/components/slider-styled',
+  false,
+  /\.(js|tsx)$/,
+);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/slider-styled',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+// create styled components to prevent false positive for "dynamic component creation"
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/slider.js b/docs/pages/components/slider.js
index 95cbb8d8174e26..5b8dd7ca95fd48 100644
--- a/docs/pages/components/slider.js
+++ b/docs/pages/components/slider.js
@@ -10,6 +10,10 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
 export default function Page({ demos, docs }) {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
diff --git a/docs/pages/performance/slider-emotion.js b/docs/pages/performance/slider-emotion.js
new file mode 100644
index 00000000000000..4bf87be2d19843
--- /dev/null
+++ b/docs/pages/performance/slider-emotion.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import NoSsr from '@material-ui/core/NoSsr';
+import SliderStyled from '@material-ui/lab/SliderStyled';
+
+const data = {
+  name: 'Frozen yoghurt',
+  calories: 159,
+  fat: 6.0,
+  carbs: 24,
+  protein: 4.0,
+};
+
+const rows = Array.from(new Array(500)).map(() => data);
+
+export default function SliderEmotion() {
+  return (
+    <NoSsr defer>
+      <div style={{ width: 300 }}>
+        {rows.map((row, index) => (
+          <SliderStyled value={20} key={index} />
+        ))}
+      </div>
+    </NoSsr>
+  );
+}
diff --git a/docs/pages/performance/slider-jss.js b/docs/pages/performance/slider-jss.js
new file mode 100644
index 00000000000000..04d9e60d8a7b12
--- /dev/null
+++ b/docs/pages/performance/slider-jss.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import NoSsr from '@material-ui/core/NoSsr';
+import Slider from '@material-ui/core/Slider';
+
+const data = {
+  name: 'Frozen yoghurt',
+  calories: 159,
+  fat: 6.0,
+  carbs: 24,
+  protein: 4.0,
+};
+
+const rows = Array.from(new Array(500)).map(() => data);
+
+export default function SliderJss() {
+  return (
+    <NoSsr defer>
+      <div style={{ width: 300 }}>
+        {rows.map((row, index) => (
+          <Slider value={20} key={index} />
+        ))}
+      </div>
+    </NoSsr>
+  );
+}
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index c1c4350701ed45..a9029670482b08 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -32,6 +32,7 @@ import Notifications from 'docs/src/modules/components/Notifications';
 import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
 import { LANGUAGES_LABEL } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
+import RtlContext from 'docs/src/modules/utils/RtlContext';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 import PageContext from 'docs/src/modules/components/PageContext';
 
@@ -147,6 +148,7 @@ function AppFrame(props) {
   const theme = useTheme();
   const t = useSelector((state) => state.options.t);
   const userLanguage = useSelector((state) => state.options.userLanguage);
+  const { rtl, setRtl } = React.useContext(RtlContext);
 
   const crowdInLocale = LOCALES[userLanguage] || userLanguage;
 
@@ -176,6 +178,8 @@ function AppFrame(props) {
     changeTheme({ paletteMode });
   };
   const handleToggleDirection = () => {
+    setRtl(!rtl);
+    // TODO: remove in v5 after the style engine is moved to emotion
     changeTheme({ direction: theme.direction === 'ltr' ? 'rtl' : 'ltr' });
   };
 
diff --git a/docs/src/modules/utils/RtlContext.js b/docs/src/modules/utils/RtlContext.js
new file mode 100644
index 00000000000000..e38bc4d2979778
--- /dev/null
+++ b/docs/src/modules/utils/RtlContext.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+const RltContext = React.createContext({
+  rtl: false,
+  setRtl: () => {},
+});
+
+export default RltContext;
diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
index d789aab726e959..cef69f1acd9a71 100644
--- a/docs/src/modules/utils/helpers.js
+++ b/docs/src/modules/utils/helpers.js
@@ -134,6 +134,8 @@ function getDependencies(raw, options = {}) {
     '@material-ui/core': getMuiPackageVersion('core', muiCommitRef),
     '@material-ui/icons': getMuiPackageVersion('icons', muiCommitRef),
     '@material-ui/lab': getMuiPackageVersion('lab', muiCommitRef),
+    '@material-ui/styled-engine': getMuiPackageVersion('styled-engine', muiCommitRef),
+    '@material-ui/styled-engine-sc': getMuiPackageVersion('styled-engine-sc', muiCommitRef),
     '@material-ui/styles': getMuiPackageVersion('styles', muiCommitRef),
     '@material-ui/system': getMuiPackageVersion('system', muiCommitRef),
     '@material-ui/utils': getMuiPackageVersion('utils', muiCommitRef),
diff --git a/docs/src/pages.js b/docs/src/pages.js
index 56bf47e7242d93..6b57a46c904a62 100644
--- a/docs/src/pages.js
+++ b/docs/src/pages.js
@@ -121,6 +121,7 @@ const pages = [
           { pathname: '/components/pagination' },
           { pathname: '/components/rating' },
           { pathname: '/components/skeleton' },
+          { pathname: '/components/slider-styled' },
           { pathname: '/components/speed-dial' },
           { pathname: '/components/timeline' },
           { pathname: '/components/toggle-button' },
diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js
new file mode 100644
index 00000000000000..6b14f7b682ebe4
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+import VolumeDown from '@material-ui/icons/VolumeDown';
+import VolumeUp from '@material-ui/icons/VolumeUp';
+
+const useStyles = makeStyles({
+  root: {
+    width: 200,
+  },
+});
+
+export default function ContinuousSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(30);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="continuous-slider" gutterBottom>
+        Volume
+      </Typography>
+      <Grid container spacing={2}>
+        <Grid item>
+          <VolumeDown />
+        </Grid>
+        <Grid item xs>
+          <Slider
+            value={value}
+            onChange={handleChange}
+            aria-labelledby="continuous-slider"
+          />
+        </Grid>
+        <Grid item>
+          <VolumeUp />
+        </Grid>
+      </Grid>
+      <Typography id="disabled-slider" gutterBottom>
+        Disabled slider
+      </Typography>
+      <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx
new file mode 100644
index 00000000000000..cd52b4eab9c878
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+import VolumeDown from '@material-ui/icons/VolumeDown';
+import VolumeUp from '@material-ui/icons/VolumeUp';
+
+const useStyles = makeStyles({
+  root: {
+    width: 200,
+  },
+});
+
+export default function ContinuousSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState<number>(30);
+
+  const handleChange = (
+    event: React.SyntheticEvent,
+    newValue: number | number[],
+  ) => {
+    setValue(newValue as number);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="continuous-slider" gutterBottom>
+        Volume
+      </Typography>
+      <Grid container spacing={2}>
+        <Grid item>
+          <VolumeDown />
+        </Grid>
+        <Grid item xs>
+          <Slider
+            value={value}
+            onChange={handleChange}
+            aria-labelledby="continuous-slider"
+          />
+        </Grid>
+        <Grid item>
+          <VolumeUp />
+        </Grid>
+      </Grid>
+      <Typography id="disabled-slider" gutterBottom>
+        Disabled slider
+      </Typography>
+      <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/CustomizedSlider.js b/docs/src/pages/components/slider-styled/CustomizedSlider.js
new file mode 100644
index 00000000000000..fb5d5e8bf343f8
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/CustomizedSlider.js
@@ -0,0 +1,210 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Slider from '@material-ui/lab/SliderStyled';
+import styled from '@emotion/styled';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: `calc(300px + ${theme.spacing(6)})`,
+  },
+  margin: {
+    height: theme.spacing(3),
+  },
+}));
+
+function ValueLabelComponent(props) {
+  const { children, open, value } = props;
+
+  return (
+    <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
+      {children}
+    </Tooltip>
+  );
+}
+
+ValueLabelComponent.propTypes = {
+  children: PropTypes.element.isRequired,
+  open: PropTypes.bool.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+const iOSBoxShadow =
+  '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)';
+
+const marks = [
+  {
+    value: 0,
+  },
+  {
+    value: 20,
+  },
+  {
+    value: 37,
+  },
+  {
+    value: 100,
+  },
+];
+
+const IOSSlider = styled(Slider)({
+  color: '#3880ff',
+  height: 2,
+  padding: '15px 0',
+  '& .MuiSlider-thumb': {
+    height: 28,
+    width: 28,
+    backgroundColor: '#fff',
+    boxShadow: iOSBoxShadow,
+    marginTop: -14,
+    marginLeft: -14,
+    '&:focus, &:hover, &.Mui-active': {
+      boxShadow:
+        '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)',
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        boxShadow: iOSBoxShadow,
+      },
+    },
+  },
+  '& .MuiSlider-valueLabel': {
+    left: 'calc(-50% + 12px)',
+    top: -22,
+    '& *': {
+      background: 'transparent',
+      color: '#000',
+    },
+  },
+  '& .MuiSlider-track': {
+    height: 2,
+  },
+  '& .MuiSlider-rail': {
+    height: 2,
+    opacity: 0.5,
+    backgroundColor: '#bfbfbf',
+  },
+  '& .MuiSlider-mark': {
+    backgroundColor: '#bfbfbf',
+    height: 8,
+    width: 1,
+    marginTop: -3,
+    '&.MuiSlider-markActive': {
+      opacity: 1,
+      backgroundColor: 'currentColor',
+    },
+  },
+});
+
+const PrettoSlider = styled(Slider)({
+  color: '#52af77',
+  height: 8,
+  '& .MuiSlider-thumb': {
+    height: 24,
+    width: 24,
+    backgroundColor: '#fff',
+    border: '2px solid currentColor',
+    marginTop: -8,
+    marginLeft: -12,
+    '&:focus, &:hover, &.Mui-active': {
+      boxShadow: 'inherit',
+    },
+  },
+  '& .MuiSlider-valueLabel': {
+    left: 'calc(-50% + 4px)',
+  },
+  '& .MuiSlider-track': {
+    height: 8,
+    borderRadius: 4,
+  },
+  '& .MuiSlider-rail': {
+    height: 8,
+    borderRadius: 4,
+  },
+});
+
+const AirbnbSlider = styled(Slider)({
+  color: '#3a8589',
+  height: 3,
+  padding: '13px 0',
+  '& .MuiSlider-thumb': {
+    height: 27,
+    width: 27,
+    backgroundColor: '#fff',
+    border: '1px solid currentColor',
+    marginTop: -12,
+    marginLeft: -13,
+    boxShadow: '#ebebeb 0 2px 2px',
+    '&:focus, &:hover, &.Mui-active': {
+      boxShadow: '#ccc 0 2px 3px 1px',
+    },
+    '& .bar': {
+      // display: inline-block !important;
+      height: 9,
+      width: 1,
+      backgroundColor: 'currentColor',
+      marginLeft: 1,
+      marginRight: 1,
+    },
+  },
+  '& .MuiSlider-track': {
+    height: 3,
+  },
+  '& .MuiSlider-rail': {
+    color: '#d8d8d8',
+    opacity: 1,
+    height: 3,
+  },
+});
+
+function AirbnbThumbComponent(props) {
+  return (
+    <span {...props}>
+      <span className="bar" />
+      <span className="bar" />
+      <span className="bar" />
+    </span>
+  );
+}
+
+export default function CustomizedSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography gutterBottom>iOS</Typography>
+      <IOSSlider
+        aria-label="ios slider"
+        defaultValue={60}
+        marks={marks}
+        valueLabelDisplay="on"
+      />
+      <div className={classes.margin} />
+      <Typography gutterBottom>pretto.fr</Typography>
+      <PrettoSlider
+        valueLabelDisplay="auto"
+        aria-label="pretto slider"
+        defaultValue={20}
+      />
+      <div className={classes.margin} />
+      <Typography gutterBottom>Tooltip value label</Typography>
+      <Slider
+        components={{
+          ValueLabel: ValueLabelComponent,
+        }}
+        aria-label="custom thumb label"
+        defaultValue={20}
+      />
+      <div className={classes.margin} />
+      <Typography gutterBottom>Airbnb</Typography>
+      <AirbnbSlider
+        components={{ Thumb: AirbnbThumbComponent }}
+        getAriaLabel={(index) =>
+          index === 0 ? 'Minimum price' : 'Maximum price'
+        }
+        defaultValue={[20, 40]}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/CustomizedSlider.tsx b/docs/src/pages/components/slider-styled/CustomizedSlider.tsx
new file mode 100644
index 00000000000000..814e696d5807aa
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/CustomizedSlider.tsx
@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Slider from '@material-ui/lab/SliderStyled';
+import styled from '@emotion/styled';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: `calc(300px + ${theme.spacing(6)})`,
+    },
+    margin: {
+      height: theme.spacing(3),
+    },
+  }),
+);
+
+interface Props {
+  children: React.ReactElement;
+  open: boolean;
+  value: number;
+}
+
+function ValueLabelComponent(props: Props) {
+  const { children, open, value } = props;
+
+  return (
+    <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
+      {children}
+    </Tooltip>
+  );
+}
+
+const iOSBoxShadow =
+  '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)';
+
+const marks = [
+  {
+    value: 0,
+  },
+  {
+    value: 20,
+  },
+  {
+    value: 37,
+  },
+  {
+    value: 100,
+  },
+];
+
+const IOSSlider = styled(Slider)({
+  color: '#3880ff',
+  height: 2,
+  padding: '15px 0',
+
+  '& .MuiSlider-thumb': {
+    height: 28,
+    width: 28,
+    backgroundColor: '#fff',
+    boxShadow: iOSBoxShadow,
+    marginTop: -14,
+    marginLeft: -14,
+
+    '&:focus, &:hover, &.Mui-active': {
+      boxShadow:
+        '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)',
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        boxShadow: iOSBoxShadow,
+      },
+    },
+  },
+
+  '& .MuiSlider-valueLabel': {
+    left: 'calc(-50% + 12px)',
+    top: -22,
+    '& *': {
+      background: 'transparent',
+      color: '#000',
+    },
+  },
+
+  '& .MuiSlider-track': {
+    height: 2,
+  },
+
+  '& .MuiSlider-rail': {
+    height: 2,
+    opacity: 0.5,
+    backgroundColor: '#bfbfbf',
+  },
+
+  '& .MuiSlider-mark': {
+    backgroundColor: '#bfbfbf',
+    height: 8,
+    width: 1,
+    marginTop: -3,
+    '&.MuiSlider-markActive': {
+      opacity: 1,
+      backgroundColor: 'currentColor',
+    },
+  },
+});
+
+const PrettoSlider = styled(Slider)({
+  color: '#52af77',
+  height: 8,
+  '& .MuiSlider-thumb': {
+    height: 24,
+    width: 24,
+    backgroundColor: '#fff',
+    border: '2px solid currentColor',
+    marginTop: -8,
+    marginLeft: -12,
+    '&:focus, &:hover, &.Mui-active': {
+      boxShadow: 'inherit',
+    },
+  },
+  '& .MuiSlider-valueLabel': {
+    left: 'calc(-50% + 4px)',
+  },
+
+  '& .MuiSlider-track': {
+    height: 8,
+    borderRadius: 4,
+  },
+
+  '& .MuiSlider-rail': {
+    height: 8,
+    borderRadius: 4,
+  },
+});
+
+const AirbnbSlider = styled(Slider)({
+  color: '#3a8589',
+  height: 3,
+  padding: '13px 0',
+
+  '& .MuiSlider-thumb': {
+    height: 27,
+    width: 27,
+    backgroundColor: '#fff',
+    border: '1px solid currentColor',
+    marginTop: -12,
+    marginLeft: -13,
+    boxShadow: '#ebebeb 0 2px 2px',
+    '&:focus, &:hover, &.Mui-active': {
+      boxShadow: '#ccc 0 2px 3px 1px',
+    },
+    '& .bar': {
+      // display: inline-block !important;
+      height: 9,
+      width: 1,
+      backgroundColor: 'currentColor',
+      marginLeft: 1,
+      marginRight: 1,
+    },
+  },
+
+  '& .MuiSlider-track': {
+    height: 3,
+  },
+
+  '& .MuiSlider-rail': {
+    color: '#d8d8d8',
+    opacity: 1,
+    height: 3,
+  },
+});
+
+function AirbnbThumbComponent(props: any) {
+  return (
+    <span {...props}>
+      <span className="bar" />
+      <span className="bar" />
+      <span className="bar" />
+    </span>
+  );
+}
+
+export default function CustomizedSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography gutterBottom>iOS</Typography>
+      <IOSSlider
+        aria-label="ios slider"
+        defaultValue={60}
+        marks={marks}
+        valueLabelDisplay="on"
+      />
+      <div className={classes.margin} />
+      <Typography gutterBottom>pretto.fr</Typography>
+      <PrettoSlider
+        valueLabelDisplay="auto"
+        aria-label="pretto slider"
+        defaultValue={20}
+      />
+      <div className={classes.margin} />
+      <Typography gutterBottom>Tooltip value label</Typography>
+      <Slider
+        components={{
+          ValueLabel: ValueLabelComponent,
+        }}
+        aria-label="custom thumb label"
+        defaultValue={20}
+      />
+      <div className={classes.margin} />
+      <Typography gutterBottom>Airbnb</Typography>
+      <AirbnbSlider
+        components={{ Thumb: AirbnbThumbComponent }}
+        getAriaLabel={(index) =>
+          index === 0 ? 'Minimum price' : 'Maximum price'
+        }
+        defaultValue={[20, 40]}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSlider.js b/docs/src/pages/components/slider-styled/DiscreteSlider.js
new file mode 100644
index 00000000000000..5679deecff81df
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSlider.js
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider" gutterBottom>
+        Temperature
+      </Typography>
+      <Slider
+        defaultValue={30}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider"
+        valueLabelDisplay="auto"
+        step={10}
+        marks
+        min={10}
+        max={110}
+      />
+      <Typography id="discrete-slider" gutterBottom>
+        Disabled
+      </Typography>
+      <Slider
+        defaultValue={30}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider"
+        valueLabelDisplay="auto"
+        step={10}
+        marks
+        min={10}
+        max={110}
+        disabled
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSlider.tsx b/docs/src/pages/components/slider-styled/DiscreteSlider.tsx
new file mode 100644
index 00000000000000..db614ccc1e9e96
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSlider.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider" gutterBottom>
+        Temperature
+      </Typography>
+      <Slider
+        defaultValue={30}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider"
+        valueLabelDisplay="auto"
+        step={10}
+        marks
+        min={10}
+        max={110}
+      />
+      <Typography id="discrete-slider" gutterBottom>
+        Disabled
+      </Typography>
+      <Slider
+        defaultValue={30}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider"
+        valueLabelDisplay="auto"
+        step={10}
+        marks
+        min={10}
+        max={110}
+        disabled
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderLabel.js b/docs/src/pages/components/slider-styled/DiscreteSliderLabel.js
new file mode 100644
index 00000000000000..4a17d4368f011c
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSliderLabel.js
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: 300,
+  },
+  margin: {
+    height: theme.spacing(3),
+  },
+}));
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider-always" gutterBottom>
+        Always visible
+      </Typography>
+      <Slider
+        defaultValue={80}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider-always"
+        step={10}
+        marks={marks}
+        valueLabelDisplay="on"
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx
new file mode 100644
index 00000000000000..c7143e59029a0c
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 300,
+    },
+    margin: {
+      height: theme.spacing(3),
+    },
+  }),
+);
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider-always" gutterBottom>
+        Always visible
+      </Typography>
+      <Slider
+        defaultValue={80}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider-always"
+        step={10}
+        marks={marks}
+        valueLabelDisplay="on"
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderMarks.js b/docs/src/pages/components/slider-styled/DiscreteSliderMarks.js
new file mode 100644
index 00000000000000..155e98f909ac95
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSliderMarks.js
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: 300,
+  },
+  margin: {
+    height: theme.spacing(3),
+  },
+}));
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider-custom" gutterBottom>
+        Custom marks
+      </Typography>
+      <Slider
+        defaultValue={20}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider-custom"
+        step={10}
+        valueLabelDisplay="auto"
+        marks={marks}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx
new file mode 100644
index 00000000000000..6513f1f380d108
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 300,
+    },
+    margin: {
+      height: theme.spacing(3),
+    },
+  }),
+);
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider-custom" gutterBottom>
+        Custom marks
+      </Typography>
+      <Slider
+        defaultValue={20}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider-custom"
+        step={10}
+        valueLabelDisplay="auto"
+        marks={marks}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderSteps.js b/docs/src/pages/components/slider-styled/DiscreteSliderSteps.js
new file mode 100644
index 00000000000000..043b5f83892657
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSliderSteps.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider-small-steps" gutterBottom>
+        Small steps
+      </Typography>
+      <Slider
+        defaultValue={0.00000005}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider-small-steps"
+        step={0.00000001}
+        marks
+        min={-0.00000005}
+        max={0.0000001}
+        valueLabelDisplay="auto"
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx
new file mode 100644
index 00000000000000..acee6ddb155293
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider-small-steps" gutterBottom>
+        Small steps
+      </Typography>
+      <Slider
+        defaultValue={0.00000005}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider-small-steps"
+        step={0.00000001}
+        marks
+        min={-0.00000005}
+        max={0.0000001}
+        valueLabelDisplay="auto"
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderValues.js b/docs/src/pages/components/slider-styled/DiscreteSliderValues.js
new file mode 100644
index 00000000000000..a906ec847f180b
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSliderValues.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+function valueLabelFormat(value) {
+  return marks.findIndex((mark) => mark.value === value) + 1;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider-restrict" gutterBottom>
+        Restricted values
+      </Typography>
+      <Slider
+        defaultValue={20}
+        valueLabelFormat={valueLabelFormat}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider-restrict"
+        step={null}
+        valueLabelDisplay="auto"
+        marks={marks}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx
new file mode 100644
index 00000000000000..1b6e2c82302ed2
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+function valueLabelFormat(value: number) {
+  return marks.findIndex((mark) => mark.value === value) + 1;
+}
+
+export default function DiscreteSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="discrete-slider-restrict" gutterBottom>
+        Restricted values
+      </Typography>
+      <Slider
+        defaultValue={20}
+        valueLabelFormat={valueLabelFormat}
+        getAriaValueText={valuetext}
+        aria-labelledby="discrete-slider-restrict"
+        step={null}
+        valueLabelDisplay="auto"
+        marks={marks}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/InputSlider.js b/docs/src/pages/components/slider-styled/InputSlider.js
new file mode 100644
index 00000000000000..073d91a6b14d50
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/InputSlider.js
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+import Input from '@material-ui/core/Input';
+import VolumeUp from '@material-ui/icons/VolumeUp';
+
+const useStyles = makeStyles({
+  root: {
+    width: 250,
+  },
+  input: {
+    width: 42,
+  },
+});
+
+export default function InputSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(30);
+
+  const handleSliderChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  const handleInputChange = (event) => {
+    setValue(event.target.value === '' ? '' : Number(event.target.value));
+  };
+
+  const handleBlur = () => {
+    if (value < 0) {
+      setValue(0);
+    } else if (value > 100) {
+      setValue(100);
+    }
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="input-slider" gutterBottom>
+        Volume
+      </Typography>
+      <Grid container spacing={2} alignItems="center">
+        <Grid item>
+          <VolumeUp />
+        </Grid>
+        <Grid item xs>
+          <Slider
+            value={typeof value === 'number' ? value : 0}
+            onChange={handleSliderChange}
+            aria-labelledby="input-slider"
+          />
+        </Grid>
+        <Grid item>
+          <Input
+            className={classes.input}
+            value={value}
+            margin="dense"
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            inputProps={{
+              step: 10,
+              min: 0,
+              max: 100,
+              type: 'number',
+              'aria-labelledby': 'input-slider',
+            }}
+          />
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/InputSlider.tsx b/docs/src/pages/components/slider-styled/InputSlider.tsx
new file mode 100644
index 00000000000000..961cd5db502a92
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/InputSlider.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+import Input from '@material-ui/core/Input';
+import VolumeUp from '@material-ui/icons/VolumeUp';
+
+const useStyles = makeStyles({
+  root: {
+    width: 250,
+  },
+  input: {
+    width: 42,
+  },
+});
+
+export default function InputSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState<
+    number | string | Array<number | string>
+  >(30);
+
+  const handleSliderChange = (
+    event: React.SyntheticEvent,
+    newValue: number | number[],
+  ) => {
+    setValue(newValue);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value === '' ? '' : Number(event.target.value));
+  };
+
+  const handleBlur = () => {
+    if (value < 0) {
+      setValue(0);
+    } else if (value > 100) {
+      setValue(100);
+    }
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="input-slider" gutterBottom>
+        Volume
+      </Typography>
+      <Grid container spacing={2} alignItems="center">
+        <Grid item>
+          <VolumeUp />
+        </Grid>
+        <Grid item xs>
+          <Slider
+            value={typeof value === 'number' ? value : 0}
+            onChange={handleSliderChange}
+            aria-labelledby="input-slider"
+          />
+        </Grid>
+        <Grid item>
+          <Input
+            className={classes.input}
+            value={value}
+            margin="dense"
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            inputProps={{
+              step: 10,
+              min: 0,
+              max: 100,
+              type: 'number',
+              'aria-labelledby': 'input-slider',
+            }}
+          />
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/NonLinearSlider.js b/docs/src/pages/components/slider-styled/NonLinearSlider.js
new file mode 100644
index 00000000000000..332d71420b0a81
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/NonLinearSlider.js
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+function valueLabelFormat(value) {
+  const [coefficient, exponent] = value
+    .toExponential()
+    .split('e')
+    .map((item) => Number(item));
+  return `${Math.round(coefficient)}e^${exponent}`;
+}
+
+export default function NonLinearSlider() {
+  const [value, setValue] = React.useState(1);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div>
+      <Typography id="non-linear-slider" gutterBottom>
+        Temperature range
+      </Typography>
+      <Slider
+        value={value}
+        min={0}
+        step={0.1}
+        max={6}
+        scale={(x) => x ** 10}
+        getAriaValueText={valueLabelFormat}
+        valueLabelFormat={valueLabelFormat}
+        onChange={handleChange}
+        valueLabelDisplay="auto"
+        aria-labelledby="non-linear-slider"
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/NonLinearSlider.tsx b/docs/src/pages/components/slider-styled/NonLinearSlider.tsx
new file mode 100644
index 00000000000000..5700e72cae4b3f
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/NonLinearSlider.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+function valueLabelFormat(value: number) {
+  const [coefficient, exponent] = value
+    .toExponential()
+    .split('e')
+    .map((item) => Number(item));
+  return `${Math.round(coefficient)}e^${exponent}`;
+}
+
+export default function NonLinearSlider() {
+  const [value, setValue] = React.useState<number | number[]>(1);
+
+  const handleChange = (
+    event: React.SyntheticEvent,
+    newValue: number | number[],
+  ) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div>
+      <Typography id="non-linear-slider" gutterBottom>
+        Temperature range
+      </Typography>
+      <Slider
+        value={value}
+        min={0}
+        step={0.1}
+        max={6}
+        scale={(x) => x ** 10}
+        getAriaValueText={valueLabelFormat}
+        valueLabelFormat={valueLabelFormat}
+        onChange={handleChange}
+        valueLabelDisplay="auto"
+        aria-labelledby="non-linear-slider"
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/RangeSlider.js b/docs/src/pages/components/slider-styled/RangeSlider.js
new file mode 100644
index 00000000000000..322a54fd3d761e
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/RangeSlider.js
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function RangeSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState([20, 37]);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="range-slider" gutterBottom>
+        Temperature range
+      </Typography>
+      <Slider
+        value={value}
+        onChange={handleChange}
+        valueLabelDisplay="auto"
+        aria-labelledby="range-slider"
+        getAriaValueText={valuetext}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/RangeSlider.tsx b/docs/src/pages/components/slider-styled/RangeSlider.tsx
new file mode 100644
index 00000000000000..bb4ab7658f23ae
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/RangeSlider.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export default function RangeSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState<number[]>([20, 37]);
+
+  const handleChange = (
+    event: React.SyntheticEvent,
+    newValue: number | number[],
+  ) => {
+    setValue(newValue as number[]);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="range-slider" gutterBottom>
+        Temperature range
+      </Typography>
+      <Slider
+        value={value}
+        onChange={handleChange}
+        valueLabelDisplay="auto"
+        aria-labelledby="range-slider"
+        getAriaValueText={valuetext}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/TrackFalseSlider.js b/docs/src/pages/components/slider-styled/TrackFalseSlider.js
new file mode 100644
index 00000000000000..7db4564bed6d1c
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/TrackFalseSlider.js
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: 250,
+  },
+  margin: {
+    height: theme.spacing(3),
+  },
+}));
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function TrackFalseSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="track-false-slider" gutterBottom>
+        Removed track
+      </Typography>
+      <Slider
+        track={false}
+        aria-labelledby="track-false-slider"
+        getAriaValueText={valuetext}
+        defaultValue={30}
+        marks={marks}
+      />
+      <div className={classes.margin} />
+      <Typography id="track-false-range-slider" gutterBottom>
+        Removed track range slider
+      </Typography>
+      <Slider
+        track={false}
+        aria-labelledby="track-false-range-slider"
+        getAriaValueText={valuetext}
+        defaultValue={[20, 37, 50]}
+        marks={marks}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/TrackFalseSlider.tsx b/docs/src/pages/components/slider-styled/TrackFalseSlider.tsx
new file mode 100644
index 00000000000000..688e8122b4738a
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/TrackFalseSlider.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 250,
+    },
+    margin: {
+      height: theme.spacing(3),
+    },
+  }),
+);
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export default function TrackFalseSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="track-false-slider" gutterBottom>
+        Removed track
+      </Typography>
+      <Slider
+        track={false}
+        aria-labelledby="track-false-slider"
+        getAriaValueText={valuetext}
+        defaultValue={30}
+        marks={marks}
+      />
+      <div className={classes.margin} />
+      <Typography id="track-false-range-slider" gutterBottom>
+        Removed track range slider
+      </Typography>
+      <Slider
+        track={false}
+        aria-labelledby="track-false-range-slider"
+        getAriaValueText={valuetext}
+        defaultValue={[20, 37, 50]}
+        marks={marks}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/TrackInvertedSlider.js b/docs/src/pages/components/slider-styled/TrackInvertedSlider.js
new file mode 100644
index 00000000000000..b73bc65016f28d
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/TrackInvertedSlider.js
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: 250,
+  },
+  margin: {
+    height: theme.spacing(3),
+  },
+}));
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function TrackInvertedSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="track-inverted-slider" gutterBottom>
+        Inverted track
+      </Typography>
+      <Slider
+        track="inverted"
+        aria-labelledby="track-inverted-slider"
+        getAriaValueText={valuetext}
+        defaultValue={30}
+        marks={marks}
+      />
+      <div className={classes.margin} />
+      <Typography id="track-inverted-range-slider" gutterBottom>
+        Inverted track range
+      </Typography>
+      <Slider
+        track="inverted"
+        aria-labelledby="track-inverted-range-slider"
+        getAriaValueText={valuetext}
+        defaultValue={[20, 37]}
+        marks={marks}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/TrackInvertedSlider.tsx b/docs/src/pages/components/slider-styled/TrackInvertedSlider.tsx
new file mode 100644
index 00000000000000..799c560bad94f8
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/TrackInvertedSlider.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 250,
+    },
+    margin: {
+      height: theme.spacing(3),
+    },
+  }),
+);
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export default function TrackInvertedSlider() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="track-inverted-slider" gutterBottom>
+        Inverted track
+      </Typography>
+      <Slider
+        track="inverted"
+        aria-labelledby="track-inverted-slider"
+        getAriaValueText={valuetext}
+        defaultValue={30}
+        marks={marks}
+      />
+      <div className={classes.margin} />
+      <Typography id="track-inverted-range-slider" gutterBottom>
+        Inverted track range
+      </Typography>
+      <Slider
+        track="inverted"
+        aria-labelledby="track-inverted-range-slider"
+        getAriaValueText={valuetext}
+        defaultValue={[20, 37]}
+        marks={marks}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.js b/docs/src/pages/components/slider-styled/UnstyledSlider.js
new file mode 100644
index 00000000000000..a001c4b64d249c
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/UnstyledSlider.js
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import styled from '@material-ui/styled-engine';
+import SliderUnstyled from '@material-ui/lab/SliderUnstyled';
+
+const StyledSlider = styled(SliderUnstyled)`
+  color: black;
+  height: 2px;
+  width: 100%;
+  padding: 13px 0;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+
+  & .MuiSlider-rail {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    border-radius: 1px;
+    background-color: currentColor;
+    opacity: 0.38;
+  }
+
+  & .MuiSlider-track {
+    display: block;
+    position: absolute;
+    height: 2px;
+    border-radius: 1px;
+    background-color: currentColor;
+  }
+
+  & .MuiSlider-thumb {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    margin-left: -6px;
+    margin-top: -5px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    outline: 0;
+    background-color: currentColor;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &::after {
+      position: absolute;
+      content: '';
+      border-radius: 50%;
+      left: -15px;
+      top: -15px;
+      right: -15px;
+      bottom: -15px;
+    }
+  }
+`;
+
+export default function UnstyledSlider() {
+  return <StyledSlider defaultValue={10} />;
+}
diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx
new file mode 100644
index 00000000000000..a001c4b64d249c
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import styled from '@material-ui/styled-engine';
+import SliderUnstyled from '@material-ui/lab/SliderUnstyled';
+
+const StyledSlider = styled(SliderUnstyled)`
+  color: black;
+  height: 2px;
+  width: 100%;
+  padding: 13px 0;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+
+  & .MuiSlider-rail {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    border-radius: 1px;
+    background-color: currentColor;
+    opacity: 0.38;
+  }
+
+  & .MuiSlider-track {
+    display: block;
+    position: absolute;
+    height: 2px;
+    border-radius: 1px;
+    background-color: currentColor;
+  }
+
+  & .MuiSlider-thumb {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    margin-left: -6px;
+    margin-top: -5px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    outline: 0;
+    background-color: currentColor;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &::after {
+      position: absolute;
+      content: '';
+      border-radius: 50%;
+      left: -15px;
+      top: -15px;
+      right: -15px;
+      bottom: -15px;
+    }
+  }
+`;
+
+export default function UnstyledSlider() {
+  return <StyledSlider defaultValue={10} />;
+}
diff --git a/docs/src/pages/components/slider-styled/VerticalSlider.js b/docs/src/pages/components/slider-styled/VerticalSlider.js
new file mode 100644
index 00000000000000..a48498a258fc45
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/VerticalSlider.js
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    height: 300,
+  },
+});
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+export default function VerticalSlider() {
+  const classes = useStyles();
+
+  return (
+    <React.Fragment>
+      <Typography id="vertical-slider" gutterBottom>
+        Temperature
+      </Typography>
+      <div className={classes.root}>
+        <Slider
+          orientation="vertical"
+          getAriaValueText={valuetext}
+          defaultValue={30}
+          aria-labelledby="vertical-slider"
+        />
+        <Slider
+          disabled
+          orientation="vertical"
+          getAriaValueText={valuetext}
+          defaultValue={30}
+          aria-labelledby="vertical-slider"
+        />
+        <Slider
+          orientation="vertical"
+          defaultValue={[20, 37]}
+          aria-labelledby="vertical-slider"
+          getAriaValueText={valuetext}
+          marks={marks}
+        />
+      </div>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/VerticalSlider.tsx b/docs/src/pages/components/slider-styled/VerticalSlider.tsx
new file mode 100644
index 00000000000000..d022f524add1e4
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/VerticalSlider.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/SliderStyled';
+
+const useStyles = makeStyles({
+  root: {
+    height: 300,
+  },
+});
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+export default function VerticalSlider() {
+  const classes = useStyles();
+
+  return (
+    <React.Fragment>
+      <Typography id="vertical-slider" gutterBottom>
+        Temperature
+      </Typography>
+      <div className={classes.root}>
+        <Slider
+          orientation="vertical"
+          getAriaValueText={valuetext}
+          defaultValue={30}
+          aria-labelledby="vertical-slider"
+        />
+        <Slider
+          disabled
+          orientation="vertical"
+          getAriaValueText={valuetext}
+          defaultValue={30}
+          aria-labelledby="vertical-slider"
+        />
+        <Slider
+          orientation="vertical"
+          defaultValue={[20, 37]}
+          aria-labelledby="vertical-slider"
+          getAriaValueText={valuetext}
+          marks={marks}
+        />
+      </div>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/pages/components/slider-styled/slider-styled.md b/docs/src/pages/components/slider-styled/slider-styled.md
new file mode 100644
index 00000000000000..475b8bf0f9cedb
--- /dev/null
+++ b/docs/src/pages/components/slider-styled/slider-styled.md
@@ -0,0 +1,117 @@
+---
+title: Slider React component
+components: Slider
+githubLabel: component: Slider
+materialDesign: https://material.io/components/sliders
+waiAria: https://www.w3.org/TR/wai-aria-practices/#slider
+---
+
+# Slider
+
+<p class="description">Sliders allow users to make selections from a range of values.</p>
+
+Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
+
+- 📦 [22 kB gzipped](/size-snapshot) (but only +8 kB when used together with other Material-UI components).
+
+{{"component": "modules/components/ComponentLinkHeader.js"}}
+
+## Continuous sliders
+
+Continuous sliders allow users to select a value along a subjective range.
+
+{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}}
+
+## Discrete sliders
+
+Discrete sliders can be adjusted to a specific value by referencing its value indicator.
+By order of demos:
+
+You can generate a mark for each step with `marks={true}`.
+
+{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}}
+
+### Small steps
+
+You can change the default step increment.
+
+{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}}
+
+### Custom marks
+
+You can have custom marks by providing a rich array to the `marks` prop.
+
+{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}}
+
+### Restricted values
+
+You can restrict the selectable values to those provided with the `marks` prop with `step={null}`.
+
+{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}}
+
+### Label always visible
+
+You can force the thumb label to be always visible with `valueLabelDisplay="on"`.
+
+{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.js"}}
+
+## Range slider
+
+The slider can be used to set the start and end of a range by supplying an array of values to the `value` prop.
+
+{{"demo": "pages/components/slider-styled/RangeSlider.js"}}
+
+## Slider with input field
+
+In this example an input allows a discrete value to be set.
+
+{{"demo": "pages/components/slider-styled/InputSlider.js"}}
+
+## Customized sliders
+
+Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+
+{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}}
+
+## Vertical sliders
+
+{{"demo": "pages/components/slider-styled/VerticalSlider.js"}}
+
+## Track
+
+The track shows the range available for user selection.
+
+### Removed track
+
+The track can be turned off with `track={false}`.
+
+{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}}
+
+### Inverted track
+
+The track can be inverted with `track="inverted"`.
+
+{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}}
+
+## Non-linear scale
+
+You can use the `scale` prop to represent the `value` on a different scale.
+For instance, in the following demo, the value _x_ represents the power of _10^x_.
+
+{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}}
+
+## Unstyled slider
+
+{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}}
+
+## Accessibility
+
+(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider)
+
+The component handles most of the work necessary to make it accessible.
+However, you need to make sure that:
+
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value.
+  This is not required if the value matches the semantics of the label.
+  You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js
new file mode 100644
index 00000000000000..3e78bbc3f11371
--- /dev/null
+++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import styled from '@emotion/styled';
+import { ThemeProvider } from 'emotion-theming';
+
+const Root = styled('div')((props) => ({
+  width: '100%',
+  marginTop: props.theme?.spacing(4),
+  marginRight: props.theme?.spacing(2),
+}));
+
+const AffectedText = styled('div')`
+  text-align: left;
+`;
+
+const UnaffectedText = styled('div')`
+  /* @noflip */
+  text-align: left;
+`;
+
+const theme = createMuiTheme();
+
+export default function RtlOptOut() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Root>
+        <AffectedText>Affected</AffectedText>
+        <UnaffectedText>Unaffected</UnaffectedText>
+      </Root>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx
new file mode 100644
index 00000000000000..7649b3e006f036
--- /dev/null
+++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createMuiTheme, Theme } from '@material-ui/core/styles';
+import styled from '@emotion/styled';
+import { ThemeProvider } from 'emotion-theming';
+
+const Root = styled('div')((props: { theme?: Theme }) => ({
+  width: '100%',
+  marginTop: props.theme?.spacing(4),
+  marginRight: props.theme?.spacing(2),
+}));
+
+const AffectedText = styled('div')`
+  text-align: left;
+`;
+
+const UnaffectedText = styled('div')`
+  /* @noflip */
+  text-align: left;
+`;
+
+const theme = createMuiTheme();
+
+export default function RtlOptOut() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Root>
+        <AffectedText>Affected</AffectedText>
+        <UnaffectedText>Unaffected</UnaffectedText>
+      </Root>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js b/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js
new file mode 100644
index 00000000000000..836f00bb25052e
--- /dev/null
+++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import styled from '@emotion/styled';
+import { ThemeProvider } from 'emotion-theming';
+
+const Root = styled('div')((props) => ({
+  width: '100%',
+  marginTop: props.theme?.spacing(4),
+  marginRight: props.theme?.spacing(2),
+}));
+
+const AffectedText = styled('div')({
+  textAlign: 'right',
+});
+
+const UnaffectedText = styled('div')({
+  /* @noflip */
+  textAlign: 'right',
+});
+
+const theme = createMuiTheme();
+
+export default function RtlOptOut() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Root>
+        <AffectedText>Affected</AffectedText>
+        <UnaffectedText>Unaffected</UnaffectedText>
+      </Root>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/src/pages/guides/right-to-left/right-to-left.md b/docs/src/pages/guides/right-to-left/right-to-left.md
index 41f19dca4f07ee..bc92efc7c18195 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left.md
@@ -22,14 +22,28 @@ const theme = createMuiTheme({
 });
 ```
 
-### 3. jss-rtl
+### 3. Install the rtl plugin
 
-You need this JSS plugin to flip the styles: [jss-rtl](https://github.com/alitaheri/jss-rtl).
+In case you are using `jss` (up to v4), you need this JSS plugin to flip the styles: [jss-rtl](https://github.com/alitaheri/jss-rtl).
 
 ```sh
 npm install jss-rtl
 ```
 
+If you are using `emotion` or `styled-components`, you need this stylis plugin to flip the styles: [stylis-plugin-rtl](https://github.com/styled-components/stylis-plugin-rtl).
+
+```sh
+npm install stylis-plugin-rtl@^1
+```
+
+Note: both `emotion` and `styled-components` currently work with the v1 of the plugin.
+
+Having installed the plugin in your project, Material-UI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it.
+
+### 3. Load the rtl plugin
+
+#### 3.1 JSS
+
 Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below.
 Internally, withStyles is using this JSS plugin when `direction: 'rtl'` is set on the theme.
 Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to learn more about it.
@@ -52,6 +66,44 @@ function RTL(props) {
 }
 ```
 
+#### 3.2 emotion
+
+If you use emotion as your style engine, you should create new cache instance that uses the `stylis-plugin-rtl` and provide that on the top of your application tree. The [CacheProvider](https://emotion.sh/docs/cache-provider) component enables this:
+
+```jsx
+import rtlPlugin from 'stylis-plugin-rtl';
+import { CacheProvider } from '@emotion/core';
+import createCache from '@emotion/cache';
+
+// Create rtl cache
+const cacheRtl = createCache({
+  key: 'muirtl',
+  stylisPlugins: [rtlPlugin],
+  speedy: true,
+});
+
+function RTL(props) {
+  return <CacheProvider value={cacheRtl}>{props.children}</CacheProvider>;
+}
+```
+
+#### 3.3 styled-components
+
+If you use `styled-components` as your style engine, you can use the [StyleSheetManager](https://styled-components.com/docs/api#stylesheetmanager) and provide the stylis-plugin-rtl as an item in the `stylisPlugins` property:
+
+```jsx
+import { StyleSheetManager } from 'styled-components';
+import rtlPlugin from 'stylis-plugin-rtl';
+
+function RTL(props) {
+  return (
+    <StyleSheetManager stylisPlugins={[rtlPlugin]}>
+      {props.children}
+    </StyleSheetManager>
+  );
+}
+```
+
 ## Demo
 
 _Use the direction toggle button on the top right corner to flip the whole documentation_
@@ -60,8 +112,18 @@ _Use the direction toggle button on the top right corner to flip the whole docum
 
 ## Opting out of rtl transformation
 
+### JSS
+
 If you want to prevent a specific rule-set from being affected by the `rtl` transformation you can add `flip: false` at the beginning.
 
 _Use the direction toggle button on the top right corner to see the effect._
 
 {{"demo": "pages/guides/right-to-left/RtlOptOut.js", "hideEditButton": true}}
+
+### emotion & styled-components
+
+You have to use the template literal syntax and add the `/* @noflip */` directive before the rule or property for which you want to disable right-to-left styles.
+
+_Use the direction toggle button on the top right corner to see the effect._
+
+{{"demo": "pages/guides/right-to-left/RtlOptOutStylis.js", "hideEditButton": true}}
diff --git a/framer/scripts/templates/slider.txt b/framer/scripts/templates/slider.txt
index c241f3584efce0..50e47db2fcaa2b 100644
--- a/framer/scripts/templates/slider.txt
+++ b/framer/scripts/templates/slider.txt
@@ -18,4 +18,4 @@ export function «componentName»(props: Props): JSX.Element {
 
 addPropertyControls(«componentName», {
 «& propertyControls»
-});
+});
\ No newline at end of file
diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts
new file mode 100644
index 00000000000000..d5094c01241f7e
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
+import { SliderTypeMap } from '../SliderUnstyled';
+
+/**
+ *
+ * API:
+ *
+ * - [SliderStyled API](https://material-ui.com/api/slider-styled/)
+ */
+declare const Slider: OverridableComponent<SliderTypeMap>;
+
+export type SliderClassKey = keyof NonNullable<SliderTypeMap['props']['classes']>;
+
+export type SliderProps<
+  D extends React.ElementType = SliderTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<SliderTypeMap<P, D>, D>;
+
+type SliderRootProps = NonNullable<SliderProps['componentsProps']>['root'];
+type SliderMarkProps = NonNullable<SliderProps['componentsProps']>['mark'];
+type SliderMarkLabelProps = NonNullable<SliderProps['componentsProps']>['markLabel'];
+type SliderRailProps = NonNullable<SliderProps['componentsProps']>['rail'];
+type SliderTrackProps = NonNullable<SliderProps['componentsProps']>['track'];
+type SliderThumbProps = NonNullable<SliderProps['componentsProps']>['thumb'];
+type SliderValueLabel = NonNullable<SliderProps['componentsProps']>['valueLabel'];
+
+export const SliderRoot: React.FC<SliderRootProps>;
+export const SliderMark: React.FC<SliderMarkProps>;
+export const SliderMarkLabel: React.FC<SliderMarkLabelProps>;
+export const SliderRail: React.FC<SliderRailProps>;
+export const SliderTrack: React.FC<SliderTrackProps>;
+export const SliderThumb: React.FC<SliderThumbProps>;
+export const SliderValueLabel: React.FC<SliderValueLabel>;
+
+export default Slider;
diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
new file mode 100644
index 00000000000000..b098166453cd02
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
@@ -0,0 +1,316 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useThemeProps, muiStyled, fade, lighten, darken } from '@material-ui/core/styles';
+import { capitalize } from '@material-ui/core/utils';
+import SliderUnstyled from '../SliderUnstyled';
+import ValueLabelStyled from './ValueLabelStyled';
+
+const overridesResolver = (props, styles, name) => {
+  const {
+    color = 'primary',
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    orientation = 'horizontal',
+    step = 1,
+    track = 'normal',
+  } = props;
+
+  const marks =
+    marksProp === true && step !== null
+      ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
+          value: min + step * index,
+        }))
+      : marksProp || [];
+
+  const marked = marks.length > 0 && marks.some((mark) => mark.label);
+
+  const styleOverrides = {
+    ...styles.root,
+    ...styles[`color${capitalize(color)}`],
+    '&.Mui-disabled': styles.disabled,
+    ...(marked && styles.marked),
+    ...(orientation === 'vertical' && styles.vertical),
+    ...(track === 'inverted' && styles.trackInverted),
+    ...(track === false && styles.trackFalse),
+    [`& .${name}-rail`]: styles.rail,
+    [`& .${name}-track`]: styles.track,
+    [`& .${name}-mark`]: styles.mark,
+    [`& .${name}-markLabel`]: styles.markLabel,
+    [`& .${name}-valueLabel`]: styles.valueLabel,
+    [`& .${name}-thumb`]: {
+      ...styles.thumb,
+      ...styles[`thumbColor${capitalize(color)}`],
+      '&.Mui-disabled': styles.disabled,
+    },
+  };
+
+  return styleOverrides;
+};
+
+const SliderRoot = muiStyled(
+  'span',
+  {},
+  { muiName: 'MuiSlider', overridesResolver },
+)((props) => ({
+  height: 2,
+  width: '100%',
+  boxSizing: 'content-box',
+  padding: '13px 0',
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'pointer',
+  touchAction: 'none',
+  color: props.theme.palette.primary.main,
+  WebkitTapHighlightColor: 'transparent',
+  ...(props.styleProps.color === 'secondary' && {
+    color: props.theme.palette.secondary.main,
+  }),
+  '&.Mui-disabled': {
+    pointerEvents: 'none',
+    cursor: 'default',
+    color: props.theme.palette.grey[400],
+  },
+  ...(props.styleProps.orientation === 'vertical' && {
+    width: 2,
+    height: '100%',
+    padding: '0 13px',
+  }),
+  // The primary input mechanism of the device includes a pointing device of limited accuracy.
+  '@media (pointer: coarse)': {
+    // Reach 42px touch target, about ~8mm on screen.
+    padding: '20px 0',
+    ...(props.styleProps.orientation === 'vertical' && {
+      padding: '0 20px',
+    }),
+  },
+  '@media print': {
+    colorAdjust: 'exact',
+  },
+  ...(props.styleProps.marked && {
+    marginBottom: 20,
+    ...(props.styleProps.orientation === 'vertical' && {
+      marginBottom: 'auto',
+      marginRight: 20,
+    }),
+  }),
+  '& .MuiSlider-rail': {
+    display: 'block',
+    position: 'absolute',
+    width: '100%',
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: 'currentColor',
+    opacity: 0.38,
+    ...(props.styleProps.orientation === 'vertical' && {
+      height: '100%',
+      width: 2,
+    }),
+    ...(props.styleProps.track === 'inverted' && {
+      opacity: 1,
+    }),
+  },
+  '& .MuiSlider-track': {
+    display: 'block',
+    position: 'absolute',
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: 'currentColor',
+    ...(props.styleProps.orientation === 'vertical' && {
+      width: 2,
+    }),
+    ...(props.styleProps.track === false && {
+      display: 'none',
+    }),
+    ...(props.styleProps.track === 'inverted' && {
+      backgroundColor:
+        // Same logic as the LinearProgress track color
+        props.theme.palette.type === 'light'
+          ? lighten(props.theme.palette.primary.main, 0.62)
+          : darken(props.theme.palette.primary.main, 0.5),
+    }),
+  },
+  '& .MuiSlider-thumb': {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    marginLeft: -6,
+    marginTop: -5,
+    boxSizing: 'border-box',
+    borderRadius: '50%',
+    outline: 0,
+    backgroundColor: 'currentColor',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: props.theme.transitions.create(['box-shadow'], {
+      duration: props.theme.transitions.duration.shortest,
+    }),
+    '::after': {
+      position: 'absolute',
+      content: '""',
+      borderRadius: '50%',
+      // reach 42px hit target (2 * 15 + thumb diameter)
+      left: -15,
+      top: -15,
+      right: -15,
+      bottom: -15,
+    },
+    ':hover, &.Mui-focusVisible': {
+      boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.primary.main, 0.16)}`,
+      '@media (hover: none)': {
+        boxShadow: 'none',
+      },
+    },
+    '&.Mui-active': {
+      boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.primary.main, 0.16)}`,
+    },
+    '&.Mui-disabled': {
+      width: 8,
+      height: 8,
+      marginLeft: -4,
+      marginTop: -3,
+      ':hover': {
+        boxShadow: 'none',
+      },
+    },
+    ...(props.styleProps.orientation === 'vertical' && {
+      marginLeft: -5,
+      marginBottom: -6,
+    }),
+    ...(props.styleProps.orientation === 'vertical' && {
+      '&.Mui-disabled': {
+        marginLeft: -3,
+        marginBottom: -4,
+      },
+    }),
+    ...(props.styleProps.color === 'secondary' && {
+      ':hover': {
+        boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+      },
+      '&.Mui-focusVisible': {
+        boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+      },
+      '&.Mui-active': {
+        boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+      },
+    }),
+  },
+  '& .MuiSlider-valueLabel': {
+    // IE 11 centering bug, to remove from the customization demos once no longer supported
+    left: 'calc(-50% - 4px)',
+  },
+  '& .MuiSlider-mark': {
+    position: 'absolute',
+    width: 2,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: 'currentColor',
+    '&.MuiSlider-markActive': {
+      backgroundColor: props.theme.palette.background.paper,
+      opacity: 0.8,
+    },
+  },
+  '& .MuiSlider-markLabel': {
+    ...props.theme.typography.body2,
+    color: props.theme.palette.text.secondary,
+    position: 'absolute',
+    top: 26,
+    transform: 'translateX(-50%)',
+    whiteSpace: 'nowrap',
+    ...(props.styleProps.orientation === 'vertical' && {
+      top: 'auto',
+      left: 26,
+      transform: 'translateY(50%)',
+    }),
+    '@media (pointer: coarse)': {
+      top: 40,
+      ...(props.styleProps.orientation === 'vertical' && {
+        left: 31,
+      }),
+    },
+    '&.MuiSlider-markLabelActive': {
+      color: props.theme.palette.text.primary,
+    },
+  },
+}));
+
+SliderRoot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  styleProps: PropTypes.shape({
+    'aria-label': PropTypes.string,
+    'aria-labelledby': PropTypes.string,
+    'aria-valuetext': PropTypes.string,
+    classes: PropTypes.object,
+    color: PropTypes.oneOf(['primary', 'secondary']),
+    defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+    disabled: PropTypes.bool,
+    getAriaLabel: PropTypes.func,
+    getAriaValueText: PropTypes.func,
+    isRtl: PropTypes.bool,
+    marks: PropTypes.oneOfType([
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.node,
+          value: PropTypes.number.isRequired,
+        }),
+      ),
+      PropTypes.bool,
+    ]),
+    max: PropTypes.number,
+    min: PropTypes.number,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    onChangeCommitted: PropTypes.func,
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    scale: PropTypes.func,
+    step: PropTypes.number,
+    track: PropTypes.oneOf(['inverted', 'normal', false]),
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+    valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
+    valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  }),
+};
+
+const Slider = React.forwardRef(function Slider(inputProps, ref) {
+  const props = useThemeProps({ props: inputProps, name: 'MuiSlider' });
+  const {
+    /* eslint-disable react/prop-types */
+    components = {},
+    ...other
+  } = props;
+  return (
+    <SliderUnstyled
+      {...other}
+      components={{
+        Root: SliderRoot,
+        ValueLabel: ValueLabelStyled,
+        ...components,
+      }}
+      ref={ref}
+    />
+  );
+});
+
+Slider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+};
+
+export default Slider;
diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx b/packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx
new file mode 100644
index 00000000000000..e50af8eb68d4e8
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Slider from '@material-ui/lab/SliderStyled';
+
+function testOnChange() {
+  function handleSliderChange(event: React.SyntheticEvent, tabsValue: unknown) {}
+  <Slider onChange={handleSliderChange} onChangeCommitted={handleSliderChange} />;
+
+  function handleElementChange(event: React.ChangeEvent) {}
+  // @ts-expect-error internally it's whatever even lead to a change in value
+  <Slider onChange={handleElementChange} onChangeCommitted={handleElementChange} />;
+
+  // this is structurally equal to `React.SyntheticEvent`
+  // It works but we don't recommend it since it has some non-structural implications: changeEvent.target === changeEvent.currentTarget
+  function handleChange(event: React.ChangeEvent<{}>) {}
+  <Slider onChange={handleChange} />;
+}
diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.test.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.test.js
new file mode 100644
index 00000000000000..46c201e07139f8
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.test.js
@@ -0,0 +1,793 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { spy, stub } from 'sinon';
+import { expect } from 'chai';
+import {
+  createMount,
+  describeConformance,
+  act,
+  createClientRender,
+  fireEvent,
+  screen,
+} from 'test/utils';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import styled from '@material-ui/styled-engine';
+import Slider from './SliderStyled';
+
+function createTouches(touches) {
+  return {
+    changedTouches: touches.map(
+      (touch) =>
+        new Touch({
+          target: document.body,
+          ...touch,
+        }),
+    ),
+  };
+}
+
+describe('<Slider />', () => {
+  // only run in supported browsers
+  if (typeof Touch === 'undefined') {
+    return;
+  }
+
+  const mount = createMount();
+  const render = createClientRender();
+
+  describeConformance(<Slider value={0} />, () => ({
+    classes: {},
+    inheritComponent: 'span',
+    mount,
+    refInstanceof: window.HTMLSpanElement,
+    testComponentPropWith: 'span',
+  }));
+
+  it('should call handlers', () => {
+    const handleChange = spy();
+    const handleChangeCommitted = spy();
+
+    const { container, getByRole } = render(
+      <Slider onChange={handleChange} onChangeCommitted={handleChangeCommitted} value={0} />,
+    );
+    const slider = getByRole('slider');
+
+    fireEvent.mouseDown(container.firstChild);
+    fireEvent.mouseUp(document.body);
+
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChangeCommitted.callCount).to.equal(1);
+
+    slider.focus();
+    fireEvent.keyDown(slider, {
+      key: 'Home',
+    });
+    expect(handleChange.callCount).to.equal(2);
+    expect(handleChangeCommitted.callCount).to.equal(2);
+  });
+
+  it('should only listen to changes from the same touchpoint', () => {
+    const handleChange = spy();
+    const handleChangeCommitted = spy();
+    const { container } = render(
+      <Slider onChange={handleChange} onChangeCommitted={handleChangeCommitted} value={0} />,
+    );
+
+    fireEvent.touchStart(container.firstChild, createTouches([{ identifier: 1 }]));
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChangeCommitted.callCount).to.equal(0);
+
+    fireEvent.touchEnd(document.body, createTouches([{ identifier: 2 }]));
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChangeCommitted.callCount).to.equal(0);
+
+    fireEvent.touchMove(document.body, createTouches([{ identifier: 1 }]));
+    expect(handleChange.callCount).to.equal(2);
+    expect(handleChangeCommitted.callCount).to.equal(0);
+
+    fireEvent.touchMove(document.body, createTouches([{ identifier: 2 }]));
+    expect(handleChange.callCount).to.equal(2);
+    expect(handleChangeCommitted.callCount).to.equal(0);
+
+    fireEvent.touchEnd(document.body, createTouches([{ identifier: 1 }]));
+    expect(handleChange.callCount).to.equal(2);
+    expect(handleChangeCommitted.callCount).to.equal(1);
+  });
+
+  it('should edge against a dropped mouseup event', () => {
+    const handleChange = spy();
+    const { container } = render(<Slider onChange={handleChange} value={0} />);
+    stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+      width: 100,
+      left: 0,
+    }));
+
+    fireEvent.mouseDown(container.firstChild, {
+      buttons: 1,
+      clientX: 1,
+    });
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChange.args[0][1]).to.equal(1);
+
+    fireEvent.mouseMove(document.body, {
+      buttons: 1,
+      clientX: 10,
+    });
+    expect(handleChange.callCount).to.equal(2);
+    expect(handleChange.args[1][1]).to.equal(10);
+
+    fireEvent.mouseMove(document.body, {
+      buttons: 0,
+      clientX: 11,
+    });
+    // The mouse's button was released, stop the dragging session.
+    expect(handleChange.callCount).to.equal(2);
+  });
+
+  describe('prop: orientation', () => {
+    it('should render with the vertical classes', () => {
+      const { container, getByRole } = render(<Slider orientation="vertical" value={0} />);
+      expect(container.firstChild).to.have.class('MuiSlider-vertical');
+      expect(getByRole('slider')).to.have.attribute('aria-orientation', 'vertical');
+    });
+
+    it('should report the right position', () => {
+      const handleChange = spy();
+      const { container } = render(
+        <Slider orientation="vertical" defaultValue={20} onChange={handleChange} />,
+      );
+      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+        width: 10,
+        height: 100,
+        bottom: 100,
+        left: 0,
+      }));
+
+      fireEvent.touchStart(
+        container.firstChild,
+        createTouches([{ identifier: 1, clientX: 0, clientY: 20 }]),
+      );
+      fireEvent.touchMove(
+        document.body,
+        createTouches([{ identifier: 1, clientX: 0, clientY: 22 }]),
+      );
+
+      expect(handleChange.callCount).to.equal(2);
+      expect(handleChange.args[0][1]).to.equal(80);
+      expect(handleChange.args[1][1]).to.equal(78);
+    });
+  });
+
+  describe('range', () => {
+    it('should support keyboard', () => {
+      const { getAllByRole } = render(<Slider defaultValue={[20, 30]} />);
+      const [thumb1, thumb2] = getAllByRole('slider');
+
+      act(() => {
+        thumb1.focus();
+        fireEvent.keyDown(thumb1, {
+          key: 'ArrowRight',
+        });
+      });
+
+      expect(thumb1.getAttribute('aria-valuenow')).to.equal('21');
+
+      act(() => {
+        thumb2.focus();
+        fireEvent.keyDown(thumb2, {
+          key: 'ArrowLeft',
+        });
+      });
+
+      expect(thumb2.getAttribute('aria-valuenow')).to.equal('29');
+    });
+
+    it('should focus the slider when dragging', () => {
+      const { getByRole } = render(<Slider defaultValue={30} step={10} marks />);
+      const thumb = getByRole('slider');
+      fireEvent.mouseDown(thumb);
+      expect(thumb).toHaveFocus();
+    });
+
+    it('should support mouse events', () => {
+      const handleChange = spy();
+      const { container } = render(<Slider defaultValue={[20, 30]} onChange={handleChange} />);
+      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+        width: 100,
+        height: 10,
+        bottom: 10,
+        left: 0,
+      }));
+
+      fireEvent.touchStart(
+        container.firstChild,
+        createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
+      );
+
+      fireEvent.touchMove(
+        document.body,
+        createTouches([{ identifier: 1, clientX: 22, clientY: 0 }]),
+      );
+      fireEvent.touchMove(
+        document.body,
+        createTouches([{ identifier: 1, clientX: 22, clientY: 0 }]),
+      );
+
+      expect(handleChange.callCount).to.equal(3);
+      expect(handleChange.args[0][1]).to.deep.equal([21, 30]);
+      expect(handleChange.args[1][1]).to.deep.equal([22, 30]);
+      expect(handleChange.args[2][1]).to.equal(handleChange.args[1][1]);
+    });
+  });
+
+  it('should not break when initial value is out of range', () => {
+    const { container } = render(<Slider value={[19, 41]} min={20} max={40} />);
+
+    stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+      width: 100,
+      height: 10,
+      bottom: 10,
+      left: 0,
+    }));
+
+    fireEvent.touchStart(
+      container.firstChild,
+      createTouches([{ identifier: 1, clientX: 100, clientY: 0 }]),
+    );
+
+    fireEvent.touchMove(document.body, createTouches([{ identifier: 1, clientX: 20, clientY: 0 }]));
+  });
+
+  it('focuses the thumb on when touching', () => {
+    const { getByRole } = render(<Slider value={0} min={20} max={40} />);
+    const thumb = getByRole('slider');
+
+    fireEvent.touchStart(thumb, createTouches([{ identifier: 1, clientX: 0, clientY: 0 }]));
+
+    expect(thumb).toHaveFocus();
+  });
+
+  describe('prop: step', () => {
+    it('should handle a null step', () => {
+      const { getByRole, container } = render(
+        <Slider
+          step={null}
+          marks={[{ value: 0 }, { value: 20 }, { value: 30 }]}
+          defaultValue={0}
+        />,
+      );
+      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+        width: 100,
+        height: 10,
+        bottom: 10,
+        left: 0,
+      }));
+      const thumb = getByRole('slider');
+
+      fireEvent.touchStart(
+        container.firstChild,
+        createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
+      );
+      expect(thumb).to.have.attribute('aria-valuenow', '20');
+
+      thumb.focus();
+      fireEvent.keyDown(thumb, {
+        key: 'ArrowUp',
+      });
+      expect(thumb).to.have.attribute('aria-valuenow', '30');
+
+      fireEvent.keyDown(thumb, {
+        key: 'ArrowDown',
+      });
+      expect(thumb).to.have.attribute('aria-valuenow', '20');
+    });
+  });
+
+  describe('prop: disabled', () => {
+    it('should render the disabled classes', () => {
+      const { container, getByRole } = render(<Slider disabled value={0} />);
+      expect(container.firstChild).to.have.class('Mui-disabled');
+      expect(getByRole('slider')).to.not.have.attribute('tabIndex');
+    });
+
+    it('should not respond to drag events after becoming disabled', function test() {
+      // TODO: Don't skip once a fix for https://github.com/jsdom/jsdom/issues/3029 is released.
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const { getByRole, setProps, container } = render(<Slider defaultValue={0} />);
+
+      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+        width: 100,
+        height: 10,
+        bottom: 10,
+        left: 0,
+      }));
+
+      fireEvent.touchStart(
+        container.firstChild,
+        createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
+      );
+
+      const thumb = getByRole('slider');
+
+      expect(thumb).to.have.attribute('aria-valuenow', '21');
+      expect(thumb).toHaveFocus();
+
+      setProps({ disabled: true });
+      expect(thumb).not.toHaveFocus();
+      expect(thumb).to.not.have.class('Mui-active');
+
+      fireEvent.touchMove(
+        container.firstChild,
+        createTouches([{ identifier: 1, clientX: 30, clientY: 0 }]),
+      );
+
+      expect(thumb).to.have.attribute('aria-valuenow', '21');
+    });
+
+    it('is not focused (visibly) after becoming disabled', function test() {
+      // TODO: Don't skip once a fix for https://github.com/jsdom/jsdom/issues/3029 is released.
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const { getByRole, setProps } = render(<Slider defaultValue={0} />);
+
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+      setProps({ disabled: true });
+      expect(thumb).not.toHaveFocus();
+      expect(thumb).to.not.have.class('Mui-focusVisible');
+    });
+  });
+
+  describe('prop: track', () => {
+    it('should render the track classes for false', () => {
+      const { container } = render(<Slider track={false} value={50} />);
+      expect(container.firstChild).to.have.class('MuiSlider-trackFalse');
+    });
+
+    it('should render the track classes for inverted', () => {
+      const { container } = render(<Slider track="inverted" value={50} />);
+      expect(container.firstChild).to.have.class('MuiSlider-trackInverted');
+    });
+  });
+
+  describe('keyboard', () => {
+    it('should handle all the keys', () => {
+      const { getByRole } = render(<Slider defaultValue={50} />);
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+
+      fireEvent.keyDown(thumb, {
+        key: 'Home',
+      });
+      expect(thumb).to.have.attribute('aria-valuenow', '0');
+
+      fireEvent.keyDown(thumb, {
+        key: 'End',
+      });
+      expect(thumb).to.have.attribute('aria-valuenow', '100');
+
+      fireEvent.keyDown(thumb, {
+        key: 'PageDown',
+      });
+      expect(thumb).to.have.attribute('aria-valuenow', '90');
+
+      fireEvent.keyDown(thumb, {
+        key: 'Escape',
+      });
+      expect(thumb).to.have.attribute('aria-valuenow', '90');
+
+      fireEvent.keyDown(thumb, {
+        key: 'PageUp',
+      });
+      expect(thumb).to.have.attribute('aria-valuenow', '100');
+    });
+
+    const moveLeftEvent = {
+      key: 'ArrowLeft',
+    };
+    const moveRightEvent = {
+      key: 'ArrowRight',
+    };
+
+    it('should use min as the step origin', () => {
+      const { getByRole } = render(<Slider defaultValue={150} step={100} max={750} min={150} />);
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '250');
+
+      fireEvent.keyDown(thumb, moveLeftEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '150');
+    });
+
+    it('should reach right edge value', () => {
+      const { getByRole } = render(<Slider defaultValue={90} min={6} max={108} step={10} />);
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '96');
+
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '106');
+
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '108');
+
+      fireEvent.keyDown(thumb, moveLeftEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '96');
+
+      fireEvent.keyDown(thumb, moveLeftEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '86');
+    });
+
+    it('should reach left edge value', () => {
+      const { getByRole } = render(<Slider defaultValue={20} min={6} max={108} step={10} />);
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+
+      fireEvent.keyDown(thumb, moveLeftEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '6');
+
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '16');
+
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '26');
+    });
+
+    it('should round value to step precision', () => {
+      const { getByRole } = render(<Slider defaultValue={0.2} min={0} max={1} step={0.1} />);
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '0.3');
+    });
+
+    it('should not fail to round value to step precision when step is very small', () => {
+      const { getByRole } = render(
+        <Slider defaultValue={0.00000002} min={0} max={0.00000005} step={0.00000001} />,
+      );
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '3e-8');
+    });
+
+    it('should not fail to round value to step precision when step is very small and negative', () => {
+      const { getByRole } = render(
+        <Slider defaultValue={-0.00000002} min={-0.00000005} max={0} step={0.00000001} />,
+      );
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+
+      fireEvent.keyDown(thumb, moveLeftEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '-3e-8');
+    });
+
+    it('should handle RTL', () => {
+      const { getByRole } = render(
+        <ThemeProvider
+          theme={createMuiTheme({
+            direction: 'rtl',
+          })}
+        >
+          <Slider defaultValue={30} />
+        </ThemeProvider>,
+      );
+      const thumb = getByRole('slider');
+      act(() => {
+        thumb.focus();
+      });
+
+      fireEvent.keyDown(thumb, moveLeftEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '31');
+      fireEvent.keyDown(thumb, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '30');
+    });
+  });
+
+  describe('prop: valueLabelDisplay', () => {
+    it('should always display the value label', () => {
+      const { getByRole, setProps } = render(<Slider valueLabelDisplay="auto" value={50} />);
+      const thumb = getByRole('slider');
+      expect(thumb.textContent).to.equal('50');
+      setProps({
+        valueLabelDisplay: 'off',
+      });
+      expect(thumb.textContent).to.equal('');
+    });
+  });
+
+  describe('markActive state', () => {
+    function getActives(container) {
+      return Array.from(container.querySelectorAll(`.MuiSlider-mark`)).map((node) =>
+        node.classList.contains('MuiSlider-markActive'),
+      );
+    }
+
+    it('sets the marks active that are `within` the value', () => {
+      const marks = [{ value: 5 }, { value: 10 }, { value: 15 }];
+
+      const { container: container1 } = render(
+        <Slider min={0} max={20} value={12} marks={marks} />,
+      );
+      expect(getActives(container1)).to.deep.equal([true, true, false]);
+
+      const { container: container2 } = render(
+        <Slider min={0} max={20} value={[8, 12]} marks={marks} />,
+      );
+      expect(getActives(container2)).to.deep.equal([false, true, false]);
+    });
+
+    it('uses closed intervals for the within check', () => {
+      const { container: container1 } = render(
+        <Slider value={10} min={0} max={10} marks step={5} />,
+      );
+      expect(getActives(container1)).to.deep.equal([true, true, true]);
+
+      const { container: container2 } = render(
+        <Slider value={9.99999} min={0} max={10} marks step={5} />,
+      );
+      expect(getActives(container2)).to.deep.equal([true, true, false]);
+    });
+
+    it('should support inverted track', () => {
+      const marks = [{ value: 5 }, { value: 10 }, { value: 15 }];
+
+      const { container: container1 } = render(
+        <Slider min={0} max={20} value={12} marks={marks} track="inverted" />,
+      );
+      expect(getActives(container1)).to.deep.equal([false, false, true]);
+
+      const { container: container2 } = render(
+        <Slider min={0} max={20} value={[8, 12]} marks={marks} track="inverted" />,
+      );
+      expect(getActives(container2)).to.deep.equal([true, false, true]);
+    });
+  });
+
+  it('should forward mouseDown', () => {
+    const handleMouseDown = spy();
+    const { container } = render(<Slider disabled onMouseDown={handleMouseDown} value={0} />);
+    fireEvent.mouseDown(container.firstChild);
+    expect(handleMouseDown.callCount).to.equal(1);
+  });
+
+  it('should handle RTL', () => {
+    const handleChange = spy();
+    const { container, getByRole } = render(
+      <ThemeProvider
+        theme={createMuiTheme({
+          direction: 'rtl',
+        })}
+      >
+        <Slider value={30} onChange={handleChange} />
+      </ThemeProvider>,
+    );
+    const thumb = getByRole('slider');
+    expect(thumb.style.right).to.equal('30%');
+
+    stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+      width: 100,
+      height: 10,
+      bottom: 10,
+      left: 0,
+    }));
+
+    fireEvent.touchStart(
+      container.firstChild,
+      createTouches([{ identifier: 1, clientX: 20, clientY: 0 }]),
+    );
+
+    fireEvent.touchMove(document.body, createTouches([{ identifier: 1, clientX: 22, clientY: 0 }]));
+
+    expect(handleChange.callCount).to.equal(2);
+    expect(handleChange.args[0][1]).to.equal(80);
+    expect(handleChange.args[1][1]).to.equal(78);
+  });
+
+  describe('warnings', () => {
+    beforeEach(() => {
+      PropTypes.resetWarningCache();
+    });
+
+    it('should warn if aria-valuetext is provided', () => {
+      expect(() => render(<Slider value={[20, 50]} aria-valuetext="hot" />)).toErrorDev(
+        'Material-UI: You need to use the `getAriaValueText` prop instead of',
+      );
+    });
+
+    it('should warn if aria-label is provided', () => {
+      expect(() => render(<Slider value={[20, 50]} aria-label="hot" />)).toErrorDev(
+        'Material-UI: You need to use the `getAriaLabel` prop instead of',
+      );
+    });
+
+    it('should warn when switching from controlled to uncontrolled', () => {
+      const { setProps } = render(<Slider value={[20, 50]} />);
+
+      expect(() => {
+        setProps({ value: undefined });
+      }).toErrorDev(
+        'Material-UI: A component is changing the controlled value state of Slider to be uncontrolled.',
+      );
+    });
+
+    it('should warn when switching between uncontrolled to controlled', () => {
+      const { setProps } = render(<Slider />);
+
+      expect(() => {
+        setProps({ value: [20, 50] });
+      }).toErrorDev(
+        'Material-UI: A component is changing the uncontrolled value state of Slider to be controlled.',
+      );
+    });
+  });
+
+  it('should support getAriaValueText', () => {
+    const getAriaValueText = (value) => `${value}°C`;
+    const { getAllByRole } = render(
+      <Slider value={[20, 50]} getAriaValueText={getAriaValueText} />,
+    );
+    const sliders = getAllByRole('slider');
+
+    expect(sliders[0]).to.have.attribute('aria-valuetext', '20°C');
+    expect(sliders[1]).to.have.attribute('aria-valuetext', '50°C');
+  });
+
+  it('should support getAriaLabel', () => {
+    const getAriaLabel = (index) => `Label ${index}`;
+    const { getAllByRole } = render(<Slider value={[20, 50]} getAriaLabel={getAriaLabel} />);
+    const sliders = getAllByRole('slider');
+
+    expect(sliders[0]).to.have.attribute('aria-label', 'Label 0');
+    expect(sliders[1]).to.have.attribute('aria-label', 'Label 1');
+  });
+
+  it('should allow customization of the marks', () => {
+    const { container } = render(
+      <Slider
+        marks={[
+          { value: 0, label: 0 },
+          { value: 20, label: 20 },
+          { value: 30, label: 30 },
+        ]}
+        defaultValue={0}
+      />,
+    );
+    expect(container.querySelectorAll('.MuiSlider-markLabel').length).to.equal(3);
+    expect(container.querySelectorAll('.MuiSlider-mark').length).to.equal(3);
+    expect(container.querySelectorAll('.MuiSlider-markLabel[data-index="2"]').length).to.equal(1);
+    expect(container.querySelectorAll('.MuiSlider-mark[data-index="2"]').length).to.equal(1);
+  });
+
+  it('should pass "name" and "value" as part of the event.target for onChange', () => {
+    const handleChange = stub().callsFake((event) => event.target);
+    const { getByRole } = render(
+      <Slider onChange={handleChange} name="change-testing" value={3} />,
+    );
+    const thumb = getByRole('slider');
+
+    act(() => {
+      thumb.focus();
+      fireEvent.keyDown(thumb, {
+        key: 'ArrowRight',
+      });
+    });
+
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChange.firstCall.returnValue).to.deep.equal({
+      name: 'change-testing',
+      value: 4,
+    });
+  });
+
+  describe('prop: components', () => {
+    it('ValueLabel receives the formatted value', () => {
+      function ValueLabelComponent(props) {
+        const { value } = props;
+        return <span data-testid="value-label">{value}</span>;
+      }
+      ValueLabelComponent.propTypes = { value: PropTypes.string };
+
+      const { getByTestId } = render(
+        <Slider
+          value={10}
+          components={{ ValueLabel: ValueLabelComponent }}
+          valueLabelDisplay="on"
+          valueLabelFormat={(n) => n.toString(2)}
+        />,
+      );
+
+      expect(getByTestId('value-label')).to.have.text('1010');
+    });
+  });
+
+  describe('theme components', () => {
+    const theme = createMuiTheme({
+      components: {
+        MuiSlider: {
+          variants: [
+            {
+              props: { color: 'primary', orientation: 'vertical' },
+              style: {
+                backgroundColor: 'rgb(0, 255, 0)',
+              },
+            },
+          ],
+          styleOverrides: {
+            root: {
+              background: 'rgb(255, 0, 0)',
+            },
+          },
+        },
+      },
+    });
+
+    it('overrides should be respected', () => {
+      render(
+        <ThemeProvider theme={theme}>
+          <Slider data-testid="component">Test</Slider>
+        </ThemeProvider>,
+      );
+
+      const style = window.getComputedStyle(screen.getByTestId('component'));
+      expect(style.getPropertyValue('background-color')).to.equal('rgb(255, 0, 0)');
+    });
+
+    it('variants should win over overrides', () => {
+      render(
+        <ThemeProvider theme={theme}>
+          <Slider data-testid="component" color="primary" orientation="vertical">
+            Test
+          </Slider>
+        </ThemeProvider>,
+      );
+
+      const style = window.getComputedStyle(screen.getByTestId('component'));
+      expect(style.getPropertyValue('background-color')).to.equal('rgb(0, 255, 0)');
+    });
+
+    it('styled wrapper should win over variants', () => {
+      const CustomSlider = styled(Slider)`
+        background-color: rgb(0, 0, 255);
+      `;
+
+      render(
+        <ThemeProvider theme={theme}>
+          <CustomSlider data-testid="component" color="primary" orientation="vertical">
+            Test
+          </CustomSlider>
+        </ThemeProvider>,
+      );
+
+      const style = window.getComputedStyle(screen.getByTestId('component'));
+      expect(style.getPropertyValue('background-color')).to.equal('rgb(0, 0, 255)');
+    });
+  });
+});
diff --git a/packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js b/packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js
new file mode 100644
index 00000000000000..1ac066f95062a8
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useThemeProps, muiStyled } from '@material-ui/core/styles';
+import ValueLabelUnstyled from '../SliderUnstyled/ValueLabelUnstyled';
+
+const overridesResolver = (_, styles) => {
+  const componentName = 'MuiSlider-valueLabel';
+
+  const styleOverrides = {
+    ...styles.root,
+    [`&.${componentName}Open`]: styles.open,
+    [`&.${componentName}Offset`]: styles.offset,
+    [`& .${componentName}Circle`]: styles.circle,
+    [`& .${componentName}Label`]: styles.label,
+  };
+
+  return styleOverrides;
+};
+
+const ValueLabelRoot = muiStyled(
+  'span',
+  {},
+  { muiName: 'PrivateValueLabel', overridesResolver },
+)((props) => ({
+  '&.MuiSlider-valueLabelOffset': {
+    '&.MuiSlider-valueLabelOpen': {
+      transform: 'scale(1) translateY(-10px)',
+    },
+    zIndex: 1,
+    ...props.theme.typography.body2,
+    fontSize: props.theme.typography.pxToRem(12),
+    lineHeight: 1.2,
+    transition: props.theme.transitions.create(['transform'], {
+      duration: props.theme.transitions.duration.shortest,
+    }),
+    top: -34,
+    transformOrigin: 'bottom center',
+    transform: 'scale(0)',
+    position: 'absolute',
+  },
+  '& .MuiSlider-valueLabelCircle': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    borderRadius: '50% 50% 50% 0',
+    backgroundColor: 'currentColor',
+    transform: 'rotate(-45deg)',
+  },
+  '& .MuiSlider-valueLabelLabel': {
+    color: props.theme.palette.primary.contrastText,
+    transform: 'rotate(45deg)',
+  },
+}));
+
+/**
+ * @ignore - internal component.
+ */
+const ValueLabel = React.forwardRef(function ValueLabel(inputProps, ref) {
+  const props = useThemeProps({ props: inputProps, name: 'PrivateValueLabel' });
+  /* eslint-disable react/prop-types */
+  const { components = {}, ...other } = props;
+
+  return (
+    <ValueLabelUnstyled
+      {...other}
+      components={{
+        Root: ValueLabelRoot || components.Root,
+      }}
+      ref={ref}
+    />
+  );
+});
+
+export default ValueLabel;
diff --git a/packages/material-ui-lab/src/SliderStyled/index.d.ts b/packages/material-ui-lab/src/SliderStyled/index.d.ts
new file mode 100644
index 00000000000000..444df65729b43f
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderStyled/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './SliderStyled';
+export * from './SliderStyled';
diff --git a/packages/material-ui-lab/src/SliderStyled/index.js b/packages/material-ui-lab/src/SliderStyled/index.js
new file mode 100644
index 00000000000000..1df58e6268e679
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderStyled/index.js
@@ -0,0 +1 @@
+export { default } from './SliderStyled';
diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
new file mode 100644
index 00000000000000..fbf8a8b747c0a7
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
@@ -0,0 +1,207 @@
+import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+
+export interface Mark {
+  value: number;
+  label?: React.ReactNode;
+}
+
+export interface ValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactElement;
+  index: number;
+  open: boolean;
+  value: number;
+}
+
+export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
+  props: P & {
+    /**
+     * The label of the slider.
+     */
+    'aria-label'?: string;
+    /**
+     * The id of the element containing a label for the slider.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * A string value that provides a user-friendly name for the current value of the slider.
+     */
+    'aria-valuetext'?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: {};
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * The components used for each slot inside the Slider.
+     * Either a string to use a HTML element or a component.
+     */
+    components?: {
+      Root?: React.ElementType;
+      Track?: React.ElementType;
+      Rail?: React.ElementType;
+      Thumb?: React.ElementType;
+      Mark?: React.ElementType;
+      MarkLabel?: React.ElementType;
+      ValueLabel?: React.ElementType;
+    };
+    /**
+     * The props used for each slot inside the Slider.
+     */
+    componentsProps?: {
+      root?: {
+        styleProps?: Omit<SliderTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        as: React.ElementType;
+      };
+      track?: {
+        as?: React.ElementType;
+      };
+      rail?: {
+        as?: React.ElementType;
+      };
+      thumb?: {
+        as?: React.ElementType;
+      };
+      mark?: {
+        as?: React.ElementType;
+      };
+      markLabel?: {
+        as?: React.ElementType;
+      };
+      valueLabel?: {
+        as?: React.ElementType;
+      };
+    };
+    /**
+     * The default element value. Use when the component is not controlled.
+     */
+    defaultValue?: number | number[];
+    /**
+     * If `true`, the slider will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+     *
+     * @param {number} index The thumb label's index to format.
+     * @returns {string}
+     */
+    getAriaLabel?: (index: number) => string;
+    /**
+     * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+     *
+     * @param {number} value The thumb label's value to format.
+     * @param {number} index The thumb label's index to format.
+     * @returns {string}
+     */
+    getAriaValueText?: (value: number, index: number) => string;
+    /**
+     * Indicates whether the theme context has rtl direction. It is set automatically.
+     */
+    isRtl?: boolean;
+    /**
+     * Marks indicate predetermined values to which the user can move the slider.
+     * If `true` the marks will be spaced according the value of the `step` prop.
+     * If an array, it should contain objects with `value` and an optional `label` keys.
+     * @default false
+     */
+    marks?: boolean | Mark[];
+    /**
+     * The maximum allowed value of the slider.
+     * Should not be equal to min.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum allowed value of the slider.
+     * Should not be equal to max.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Name attribute of the hidden `input` element.
+     */
+    name?: string;
+    /**
+     * Callback function that is fired when the slider's value changed.
+     *
+     * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.
+     * @param {number | number[]} value The new value.
+     */
+    onChange?: (event: React.SyntheticEvent, value: number | number[]) => void;
+    /**
+     * Callback function that is fired when the `mouseup` is triggered.
+     *
+     * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.
+     * @param {number | number[]} value The new value.
+     */
+    onChangeCommitted?: (event: React.SyntheticEvent, value: number | number[]) => void;
+    /**
+     * The slider orientation.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * A transformation function, to change the scale of the slider.
+     * @default (x) => x
+     */
+    scale?: (value: number) => number;
+    /**
+     * The granularity with which the slider can step through values. (A "discrete" slider.)
+     * The `min` prop serves as the origin for the valid values.
+     * We recommend (max - min) to be evenly divisible by the step.
+     *
+     * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+     * @default 1
+     */
+    step?: number | null;
+    /**
+     * The track presentation:
+     *
+     * - `normal` the track will render a bar representing the slider value.
+     * - `inverted` the track will render a bar representing the remaining slider value.
+     * - `false` the track will render without a bar.
+     * @default 'normal'
+     */
+    track?: 'normal' | false | 'inverted';
+    /**
+     * The value of the slider.
+     * For ranged sliders, provide an array with two values.
+     */
+    value?: number | number[];
+    /**
+     * Controls when the value label is displayed:
+     *
+     * - `auto` the value label will display when the thumb is hovered or focused.
+     * - `on` will display persistently.
+     * - `off` will never display.
+     * @default 'off'
+     */
+    valueLabelDisplay?: 'on' | 'auto' | 'off';
+    /**
+     * The format function the value label's value.
+     *
+     * When a function is provided, it should have the following signature:
+     *
+     * - {number} value The value label's value to format
+     * - {number} index The value label's index to format
+     * @default (x) => x
+     */
+    valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
+  };
+  defaultComponent: D;
+}
+
+/**
+ *
+ * API:
+ *
+ * - [SliderUnstyled API](https://material-ui.com/api/slider-unstyled/)
+ */
+declare const SliderBase: OverridableComponent<SliderTypeMap>;
+
+export default SliderBase;
diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
new file mode 100644
index 00000000000000..a7291efdd9e041
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
@@ -0,0 +1,936 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { chainPropTypes } from '@material-ui/utils';
+import {
+  useIsFocusVisible,
+  unstable_useEnhancedEffect as useEnhancedEffect,
+  ownerDocument,
+  useEventCallback,
+  useForkRef,
+  capitalize,
+  useControlled,
+} from '@material-ui/core/utils';
+import ValueLabelComponent from './ValueLabelUnstyled';
+
+function asc(a, b) {
+  return a - b;
+}
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(min, value), max);
+}
+
+function findClosest(values, currentValue) {
+  const { index: closestIndex } = values.reduce((acc, value, index) => {
+    const distance = Math.abs(currentValue - value);
+
+    if (acc === null || distance < acc.distance || distance === acc.distance) {
+      return {
+        distance,
+        index,
+      };
+    }
+
+    return acc;
+  }, null);
+  return closestIndex;
+}
+
+function trackFinger(event, touchId) {
+  if (touchId.current !== undefined && event.changedTouches) {
+    for (let i = 0; i < event.changedTouches.length; i += 1) {
+      const touch = event.changedTouches[i];
+      if (touch.identifier === touchId.current) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY,
+        };
+      }
+    }
+
+    return false;
+  }
+
+  return {
+    x: event.clientX,
+    y: event.clientY,
+  };
+}
+
+function valueToPercent(value, min, max) {
+  return ((value - min) * 100) / (max - min);
+}
+
+function percentToValue(percent, min, max) {
+  return (max - min) * percent + min;
+}
+
+function getDecimalPrecision(num) {
+  // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
+  // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-');
+    const matissaDecimalPart = parts[0].split('.')[1];
+    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+  }
+
+  const decimalPart = num.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
+function roundValueToStep(value, step, min) {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+
+function setValueIndex({ values, source, newValue, index }) {
+  // Performance shortcut
+  if (source[index] === newValue) {
+    return source;
+  }
+
+  const output = values.slice();
+  output[index] = newValue;
+  return output;
+}
+
+function focusThumb({ sliderRef, activeIndex, setActive }) {
+  const doc = ownerDocument(sliderRef.current);
+  if (
+    !sliderRef.current.contains(doc.activeElement) ||
+    Number(doc.activeElement.getAttribute('data-index')) !== activeIndex
+  ) {
+    sliderRef.current.querySelector(`[role="slider"][data-index="${activeIndex}"]`).focus();
+  }
+
+  if (setActive) {
+    setActive(activeIndex);
+  }
+}
+
+const axisProps = {
+  horizontal: {
+    offset: (percent) => ({ left: `${percent}%` }),
+    leap: (percent) => ({ width: `${percent}%` }),
+  },
+  'horizontal-reverse': {
+    offset: (percent) => ({ right: `${percent}%` }),
+    leap: (percent) => ({ width: `${percent}%` }),
+  },
+  vertical: {
+    offset: (percent) => ({ bottom: `${percent}%` }),
+    leap: (percent) => ({ height: `${percent}%` }),
+  },
+};
+
+const Identity = (x) => x;
+
+// TODO: remove support for Safari < 13.
+// https://caniuse.com/#search=touch-action
+//
+// Safari, on iOS, supports touch action since v13.
+// Over 80% of the iOS phones are compatible
+// in August 2020.
+let cachedSupportsTouchActionNone;
+function doesSupportTouchActionNone() {
+  if (cachedSupportsTouchActionNone === undefined) {
+    const element = document.createElement('div');
+    element.style.touchAction = 'none';
+    document.body.appendChild(element);
+    cachedSupportsTouchActionNone = window.getComputedStyle(element).touchAction === 'none';
+    element.parentElement.removeChild(element);
+  }
+  return cachedSupportsTouchActionNone;
+}
+
+const getUtilityClass = (name) => {
+  return `MuiSlider-${name}`;
+};
+
+const useSliderClasses = (props) => {
+  const { color, disabled, marked, orientation, track } = props;
+
+  const utilityClasses = {
+    root: clsx(getUtilityClass('root'), getUtilityClass(`color${capitalize(color)}`), {
+      'Mui-disabled': disabled,
+      [getUtilityClass('marked')]: marked,
+      [getUtilityClass('vertical')]: orientation === 'vertical',
+      [getUtilityClass('trackInverted')]: track === 'inverted',
+      [getUtilityClass('trackFalse')]: track === false,
+    }),
+    rail: getUtilityClass('rail'),
+    track: getUtilityClass('track'),
+    mark: getUtilityClass('mark'),
+    markLabel: getUtilityClass('markLabel'),
+    valueLabel: getUtilityClass('valueLabel'),
+    thumb: clsx(getUtilityClass('thumb'), getUtilityClass(`thumbColor${capitalize(color)}`), {
+      'Mui-disabled': disabled,
+    }),
+  };
+
+  return utilityClasses;
+};
+
+const isComponent = (element) => typeof element !== 'string';
+
+const Slider = React.forwardRef(function Slider(props, ref) {
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-valuetext': ariaValuetext,
+    className,
+    color = 'primary',
+    component: Component = 'span',
+    defaultValue,
+    disabled = false,
+    getAriaLabel,
+    getAriaValueText,
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    name,
+    onChange,
+    onChangeCommitted,
+    onMouseDown,
+    orientation = 'horizontal',
+    scale = Identity,
+    step = 1,
+    track = 'normal',
+    value: valueProp,
+    valueLabelDisplay = 'off',
+    valueLabelFormat = Identity,
+    isRtl = false,
+    // TODO: these proptypes were not generated
+    /* eslint-disable react/prop-types */
+    components = {},
+    /* eslint-disable react/prop-types */
+    componentsProps = {},
+    /* eslint-disable react/prop-types */
+    theme,
+    ...other
+  } = props;
+
+  const touchId = React.useRef();
+  // We can't use the :active browser pseudo-classes.
+  // - The active state isn't triggered when clicking on the rail.
+  // - The active state isn't transfered when inversing a range slider.
+  const [active, setActive] = React.useState(-1);
+  const [open, setOpen] = React.useState(-1);
+
+  const [valueDerived, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: 'Slider',
+  });
+
+  const handleChange =
+    onChange &&
+    ((event, value) => {
+      if (!(event instanceof Event)) event.persist();
+
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492
+      Object.defineProperty(event, 'target', {
+        writable: true,
+        value: { value, name },
+      });
+
+      onChange(event, value);
+    });
+
+  const range = Array.isArray(valueDerived);
+  let values = range ? valueDerived.slice().sort(asc) : [valueDerived];
+  values = values.map((value) => clamp(value, min, max));
+  const marks =
+    marksProp === true && step !== null
+      ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
+          value: min + step * index,
+        }))
+      : marksProp || [];
+
+  const {
+    isFocusVisibleRef,
+    onBlur: handleBlurVisible,
+    onFocus: handleFocusVisible,
+    ref: focusVisibleRef,
+  } = useIsFocusVisible();
+  const [focusVisible, setFocusVisible] = React.useState(-1);
+
+  const sliderRef = React.useRef();
+  const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
+  const handleRef = useForkRef(ref, handleFocusRef);
+
+  const handleFocus = useEventCallback((event) => {
+    const index = Number(event.currentTarget.getAttribute('data-index'));
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current === true) {
+      setFocusVisible(index);
+    }
+    setOpen(index);
+  });
+  const handleBlur = useEventCallback((event) => {
+    handleBlurVisible(event);
+    if (isFocusVisibleRef.current === false) {
+      setFocusVisible(-1);
+    }
+    setOpen(-1);
+  });
+  const handleMouseOver = useEventCallback((event) => {
+    const index = Number(event.currentTarget.getAttribute('data-index'));
+    setOpen(index);
+  });
+  const handleMouseLeave = useEventCallback(() => {
+    setOpen(-1);
+  });
+
+  useEnhancedEffect(() => {
+    if (disabled && sliderRef.current.contains(document.activeElement)) {
+      // This is necessary because Firefox and Safari will keep focus
+      // on a disabled element:
+      // https://codesandbox.io/s/mui-pr-22247-forked-h151h?file=/src/App.js
+      document.activeElement.blur();
+    }
+  }, [disabled]);
+
+  if (disabled && active !== -1) {
+    setActive(-1);
+  }
+  if (disabled && focusVisible !== -1) {
+    setFocusVisible(-1);
+  }
+
+  const handleKeyDown = useEventCallback((event) => {
+    const index = Number(event.currentTarget.getAttribute('data-index'));
+    const value = values[index];
+    const tenPercents = (max - min) / 10;
+    const marksValues = marks.map((mark) => mark.value);
+    const marksIndex = marksValues.indexOf(value);
+    let newValue;
+    const increaseKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const decreaseKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+
+    switch (event.key) {
+      case 'Home':
+        newValue = min;
+        break;
+      case 'End':
+        newValue = max;
+        break;
+      case 'PageUp':
+        if (step) {
+          newValue = value + tenPercents;
+        }
+        break;
+      case 'PageDown':
+        if (step) {
+          newValue = value - tenPercents;
+        }
+        break;
+      case increaseKey:
+      case 'ArrowUp':
+        if (step) {
+          newValue = value + step;
+        } else {
+          newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1];
+        }
+        break;
+      case decreaseKey:
+      case 'ArrowDown':
+        if (step) {
+          newValue = value - step;
+        } else {
+          newValue = marksValues[marksIndex - 1] || marksValues[0];
+        }
+        break;
+      default:
+        return;
+    }
+
+    // Prevent scroll of the page
+    event.preventDefault();
+
+    if (step) {
+      newValue = roundValueToStep(newValue, step, min);
+    }
+
+    newValue = clamp(newValue, min, max);
+
+    if (range) {
+      const previousValue = newValue;
+      newValue = setValueIndex({
+        values,
+        source: valueDerived,
+        newValue,
+        index,
+      }).sort(asc);
+      focusThumb({ sliderRef, activeIndex: newValue.indexOf(previousValue) });
+    }
+
+    setValueState(newValue);
+    setFocusVisible(index);
+
+    if (handleChange) {
+      handleChange(event, newValue);
+    }
+    if (onChangeCommitted) {
+      onChangeCommitted(event, newValue);
+    }
+  });
+
+  const previousIndex = React.useRef();
+  let axis = orientation;
+  if (isRtl && orientation === 'horizontal') {
+    axis += '-reverse';
+  }
+
+  const getFingerNewValue = ({ finger, move = false, values: values2, source }) => {
+    const { current: slider } = sliderRef;
+    const { width, height, bottom, left } = slider.getBoundingClientRect();
+    let percent;
+
+    if (axis.indexOf('vertical') === 0) {
+      percent = (bottom - finger.y) / height;
+    } else {
+      percent = (finger.x - left) / width;
+    }
+
+    if (axis.indexOf('-reverse') !== -1) {
+      percent = 1 - percent;
+    }
+
+    let newValue;
+    newValue = percentToValue(percent, min, max);
+    if (step) {
+      newValue = roundValueToStep(newValue, step, min);
+    } else {
+      const marksValues = marks.map((mark) => mark.value);
+      const closestIndex = findClosest(marksValues, newValue);
+      newValue = marksValues[closestIndex];
+    }
+
+    newValue = clamp(newValue, min, max);
+    let activeIndex = 0;
+
+    if (range) {
+      if (!move) {
+        activeIndex = findClosest(values2, newValue);
+      } else {
+        activeIndex = previousIndex.current;
+      }
+
+      const previousValue = newValue;
+      newValue = setValueIndex({
+        values: values2,
+        source,
+        newValue,
+        index: activeIndex,
+      }).sort(asc);
+      activeIndex = newValue.indexOf(previousValue);
+      previousIndex.current = activeIndex;
+    }
+
+    return { newValue, activeIndex };
+  };
+
+  const handleTouchMove = useEventCallback((nativeEvent) => {
+    const finger = trackFinger(nativeEvent, touchId);
+
+    if (!finger) {
+      return;
+    }
+
+    // Cancel move in case some other element consumed a mouseup event and it was not fired.
+    if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      handleTouchEnd(nativeEvent);
+      return;
+    }
+
+    const { newValue, activeIndex } = getFingerNewValue({
+      finger,
+      move: true,
+      values,
+      source: valueDerived,
+    });
+
+    focusThumb({ sliderRef, activeIndex, setActive });
+    setValueState(newValue);
+
+    if (handleChange) {
+      handleChange(nativeEvent, newValue);
+    }
+  });
+
+  const handleTouchEnd = useEventCallback((nativeEvent) => {
+    const finger = trackFinger(nativeEvent, touchId);
+
+    if (!finger) {
+      return;
+    }
+
+    const { newValue } = getFingerNewValue({ finger, values, source: valueDerived });
+
+    setActive(-1);
+    if (nativeEvent.type === 'touchend') {
+      setOpen(-1);
+    }
+
+    if (onChangeCommitted) {
+      onChangeCommitted(nativeEvent, newValue);
+    }
+
+    touchId.current = undefined;
+
+    const doc = ownerDocument(sliderRef.current);
+    doc.removeEventListener('mousemove', handleTouchMove);
+    doc.removeEventListener('mouseup', handleTouchEnd);
+    doc.removeEventListener('touchmove', handleTouchMove);
+    doc.removeEventListener('touchend', handleTouchEnd);
+  });
+
+  const handleTouchStart = useEventCallback((event) => {
+    // If touch-action: none; is not supported we need to prevent the scroll manually.
+    if (!doesSupportTouchActionNone()) {
+      event.preventDefault();
+    }
+
+    const touch = event.changedTouches[0];
+    if (touch != null) {
+      // A number that uniquely identifies the current finger in the touch session.
+      touchId.current = touch.identifier;
+    }
+    const finger = trackFinger(event, touchId);
+    const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived });
+    focusThumb({ sliderRef, activeIndex, setActive });
+
+    setValueState(newValue);
+
+    if (handleChange) {
+      handleChange(event, newValue);
+    }
+
+    const doc = ownerDocument(sliderRef.current);
+    doc.addEventListener('touchmove', handleTouchMove);
+    doc.addEventListener('touchend', handleTouchEnd);
+  });
+
+  React.useEffect(() => {
+    const { current: slider } = sliderRef;
+    slider.addEventListener('touchstart', handleTouchStart, {
+      passive: doesSupportTouchActionNone(),
+    });
+
+    const doc = ownerDocument(slider);
+
+    return () => {
+      slider.removeEventListener('touchstart', handleTouchStart, {
+        passive: doesSupportTouchActionNone(),
+      });
+
+      doc.removeEventListener('mousemove', handleTouchMove);
+      doc.removeEventListener('mouseup', handleTouchEnd);
+      doc.removeEventListener('touchmove', handleTouchMove);
+      doc.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [handleTouchEnd, handleTouchMove, handleTouchStart]);
+
+  React.useEffect(() => {
+    if (disabled) {
+      const doc = ownerDocument(sliderRef.current);
+      doc.removeEventListener('mousemove', handleTouchMove);
+      doc.removeEventListener('mouseup', handleTouchEnd);
+      doc.removeEventListener('touchmove', handleTouchMove);
+      doc.removeEventListener('touchend', handleTouchEnd);
+    }
+  }, [disabled, handleTouchEnd, handleTouchMove]);
+
+  const handleMouseDown = useEventCallback((event) => {
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+
+    event.preventDefault();
+    const finger = trackFinger(event, touchId);
+    const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived });
+    focusThumb({ sliderRef, activeIndex, setActive });
+
+    setValueState(newValue);
+
+    if (handleChange) {
+      handleChange(event, newValue);
+    }
+
+    const doc = ownerDocument(sliderRef.current);
+    doc.addEventListener('mousemove', handleTouchMove);
+    doc.addEventListener('mouseup', handleTouchEnd);
+  });
+
+  const trackOffset = valueToPercent(range ? values[0] : min, min, max);
+  const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
+  const trackStyle = {
+    ...axisProps[axis].offset(trackOffset),
+    ...axisProps[axis].leap(trackLeap),
+  };
+
+  const Root = components.Root || Component;
+  const rootProps = componentsProps.root || {};
+
+  const Rail = components.Rail || 'span';
+  const railProps = componentsProps.rail || {};
+
+  const Track = components.Track || 'span';
+  const trackProps = componentsProps.track || {};
+
+  const Thumb = components.Thumb || 'span';
+  const thumbProps = componentsProps.thumb || {};
+
+  const ValueLabel = components.ValueLabel || ValueLabelComponent;
+  const valueLabelProps = componentsProps.valueLabel || {};
+
+  const Mark = components.Mark || 'span';
+  const markProps = componentsProps.mark || {};
+
+  const MarkLabel = components.MarkLabel || 'span';
+  const markLabelProps = componentsProps.markLabel || {};
+
+  // all props with defaults
+  // consider extracting to hook an reusing the lint rule for the varints
+  const stateAndProps = {
+    ...props,
+    color,
+    disabled,
+    max,
+    min,
+    orientation,
+    scale,
+    step,
+    track,
+    valueLabelDisplay,
+    valueLabelFormat,
+    isRtl,
+    marked: marks.length > 0 && marks.some((mark) => mark.label),
+  };
+
+  const utilityClasses = useSliderClasses(stateAndProps);
+
+  return (
+    <Root
+      ref={handleRef}
+      onMouseDown={handleMouseDown}
+      {...(isComponent(Root) && {
+        styleProps: stateAndProps,
+        theme,
+      })}
+      {...rootProps}
+      {...other}
+      className={clsx(utilityClasses.root, rootProps.className, className)}
+    >
+      <Rail {...railProps} className={clsx(utilityClasses.rail, railProps.className)} />
+      <Track
+        {...trackProps}
+        className={clsx(utilityClasses.track, trackProps.className)}
+        style={{ ...trackStyle, ...trackProps.style }}
+      />
+      <input value={values.join(',')} name={name} type="hidden" />
+      {marks.map((mark, index) => {
+        const percent = valueToPercent(mark.value, min, max);
+        const style = axisProps[axis].offset(percent);
+
+        let markActive;
+        if (track === false) {
+          markActive = values.indexOf(mark.value) !== -1;
+        } else {
+          markActive =
+            (track === 'normal' &&
+              (range
+                ? mark.value >= values[0] && mark.value <= values[values.length - 1]
+                : mark.value <= values[0])) ||
+            (track === 'inverted' &&
+              (range
+                ? mark.value <= values[0] || mark.value >= values[values.length - 1]
+                : mark.value >= values[0]));
+        }
+
+        return (
+          <React.Fragment key={mark.value}>
+            <Mark
+              data-index={index}
+              {...markProps}
+              style={{ ...style, ...markProps.style }}
+              className={clsx(utilityClasses.mark, markProps.className, {
+                [getUtilityClass('markActive')]: markActive,
+              })}
+            />
+            {mark.label != null ? (
+              <MarkLabel
+                aria-hidden
+                data-index={index}
+                {...markLabelProps}
+                style={{ ...style, ...markLabelProps.style }}
+                className={clsx(utilityClasses.markLabel, markLabelProps.className, {
+                  [getUtilityClass('markLabelActive')]: markActive,
+                })}
+              >
+                {mark.label}
+              </MarkLabel>
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+      {values.map((value, index) => {
+        const percent = valueToPercent(value, min, max);
+        const style = axisProps[axis].offset(percent);
+
+        return (
+          <ValueLabel
+            key={index}
+            valueLabelFormat={valueLabelFormat}
+            valueLabelDisplay={valueLabelDisplay}
+            value={
+              typeof valueLabelFormat === 'function'
+                ? valueLabelFormat(scale(value), index)
+                : valueLabelFormat
+            }
+            {...(isComponent(ValueLabel) && {
+              styleProps: stateAndProps,
+              theme,
+            })}
+            index={index}
+            open={open === index || active === index || valueLabelDisplay === 'on'}
+            disabled={disabled}
+            {...valueLabelProps}
+            className={clsx(utilityClasses.valueLabel, valueLabelProps.className)}
+          >
+            <Thumb
+              {...thumbProps}
+              className={clsx(utilityClasses.thumb, thumbProps.className, {
+                'Mui-active': active === index,
+                'Mui-disabled': disabled,
+                'Mui-focusVisible': focusVisible === index,
+              })}
+              tabIndex={disabled ? null : 0}
+              role="slider"
+              style={{ ...style, ...thumbProps.style }}
+              data-index={index}
+              aria-label={getAriaLabel ? getAriaLabel(index) : ariaLabel}
+              aria-labelledby={ariaLabelledby}
+              aria-orientation={orientation}
+              aria-valuemax={scale(max)}
+              aria-valuemin={scale(min)}
+              aria-valuenow={scale(value)}
+              aria-valuetext={
+                getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext
+              }
+              onKeyDown={handleKeyDown}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onMouseOver={handleMouseOver}
+              onMouseLeave={handleMouseLeave}
+            />
+          </ValueLabel>
+        );
+      })}
+    </Root>
+  );
+});
+
+Slider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The label of the slider.
+   */
+  'aria-label': chainPropTypes(PropTypes.string, (props) => {
+    const range = Array.isArray(props.value || props.defaultValue);
+
+    if (range && props['aria-label'] != null) {
+      return new Error(
+        'Material-UI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.',
+      );
+    }
+
+    return null;
+  }),
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  'aria-labelledby': PropTypes.string,
+  /**
+   * A string value that provides a user-friendly name for the current value of the slider.
+   */
+  'aria-valuetext': chainPropTypes(PropTypes.string, (props) => {
+    const range = Array.isArray(props.value || props.defaultValue);
+
+    if (range && props['aria-valuetext'] != null) {
+      return new Error(
+        'Material-UI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.',
+      );
+    }
+
+    return null;
+  }),
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   * @default {}
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['primary', 'secondary']),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The default element value. Use when the component is not controlled.
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  /**
+   * If `true`, the slider will be disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+   *
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaLabel: PropTypes.func,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+   *
+   * @param {number} value The thumb label's value to format.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaValueText: PropTypes.func,
+  /**
+   * Indicates whether the theme context has rtl direction. It is set automatically.
+   * @default false
+   */
+  isRtl: PropTypes.bool,
+  /**
+   * Marks indicate predetermined values to which the user can move the slider.
+   * If `true` the marks will be spaced according the value of the `step` prop.
+   * If an array, it should contain objects with `value` and an optional `label` keys.
+   * @default false
+   */
+  marks: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.node,
+        value: PropTypes.number.isRequired,
+      }),
+    ),
+    PropTypes.bool,
+  ]),
+  /**
+   * The maximum allowed value of the slider.
+   * Should not be equal to min.
+   * @default 100
+   */
+  max: PropTypes.number,
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min: PropTypes.number,
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Callback function that is fired when the `mouseup` is triggered.
+   *
+   * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   */
+  onChangeCommitted: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: PropTypes.func,
+  /**
+   * The slider orientation.
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @default (x) => x
+   */
+  scale: PropTypes.func,
+  /**
+   * The granularity with which the slider can step through values. (A "discrete" slider.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step: PropTypes.number,
+  /**
+   * The component used to display the value label.
+   * @default 'span'
+   */
+  ThumbComponent: PropTypes.elementType,
+  /**
+   * The track presentation:
+   *
+   * - `normal` the track will render a bar representing the slider value.
+   * - `inverted` the track will render a bar representing the remaining slider value.
+   * - `false` the track will render without a bar.
+   * @default 'normal'
+   */
+  track: PropTypes.oneOf(['inverted', 'normal', false]),
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
+  /**
+   * The format function the value label's value.
+   *
+   * When a function is provided, it should have the following signature:
+   *
+   * - {number} value The value label's value to format
+   * - {number} index The value label's index to format
+   * @default (x) => x
+   */
+  valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
+
+export default Slider;
diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.test.js b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.test.js
new file mode 100644
index 00000000000000..9ce70015f180d9
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.test.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createMount, describeConformance } from 'test/utils';
+import SliderUnstyled from './SliderUnstyled';
+
+describe('<SliderUnstyled />', () => {
+  if (typeof Touch === 'undefined') {
+    return;
+  }
+
+  const mount = createMount();
+
+  describeConformance(<SliderUnstyled value={0} />, () => ({
+    classes: {},
+    inheritComponent: 'span',
+    mount,
+    refInstanceof: window.HTMLSpanElement,
+    testComponentPropWith: 'span',
+  }));
+});
diff --git a/packages/material-ui-lab/src/SliderUnstyled/ValueLabelUnstyled.js b/packages/material-ui-lab/src/SliderUnstyled/ValueLabelUnstyled.js
new file mode 100644
index 00000000000000..7d254f7c5f1a92
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderUnstyled/ValueLabelUnstyled.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { capitalize } from '@material-ui/core/utils';
+import clsx from 'clsx';
+
+const getUtilityClass = (name) => {
+  return `MuiSlider-valueLabel${capitalize(name)}`;
+};
+
+const useValueLabelClasses = (props) => {
+  const { open, valueLabelDisplay } = props;
+
+  const utilityClasses = {
+    offset: clsx('MuiSlider-valueLabel', getUtilityClass('offset'), {
+      [getUtilityClass('open')]: open || valueLabelDisplay === 'on',
+    }),
+    circle: getUtilityClass('circle'),
+    label: getUtilityClass('label'),
+  };
+
+  return utilityClasses;
+};
+
+/**
+ * @ignore - internal component.
+ */
+function ValueLabel(props) {
+  const { children, className, value, valueLabelDisplay, components = {}, theme } = props;
+  const classes = useValueLabelClasses(props);
+
+  if (valueLabelDisplay === 'off') {
+    return children;
+  }
+
+  const Root = components.Root || 'span';
+
+  return React.cloneElement(
+    children,
+    {
+      className: clsx(children.props.className),
+    },
+    <Root className={clsx(classes.offset, className)} theme={theme}>
+      <span className={classes.circle}>
+        <span className={classes.label}>{value}</span>
+      </span>
+    </Root>,
+  );
+}
+
+export default ValueLabel;
diff --git a/packages/material-ui-lab/src/SliderUnstyled/index.d.ts b/packages/material-ui-lab/src/SliderUnstyled/index.d.ts
new file mode 100644
index 00000000000000..89f78b13135807
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderUnstyled/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './SliderUnstyled';
+export * from './SliderUnstyled';
diff --git a/packages/material-ui-lab/src/SliderUnstyled/index.js b/packages/material-ui-lab/src/SliderUnstyled/index.js
new file mode 100644
index 00000000000000..14f6f5b5479b07
--- /dev/null
+++ b/packages/material-ui-lab/src/SliderUnstyled/index.js
@@ -0,0 +1 @@
+export { default } from './SliderUnstyled';
diff --git a/packages/material-ui-styled-engine-sc/README.md b/packages/material-ui-styled-engine-sc/README.md
new file mode 100644
index 00000000000000..f538dd9ae385a1
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/README.md
@@ -0,0 +1,22 @@
+# @material-ui/styled-engine-sc
+
+This package is a wrapper around the `styled-components` package. It is created to be used as alias for the `@material-ui/styled-engine` package, for the developers who would like to use `styled-components` as a styled engine instead of `@emotion/styled`.
+
+## Installation
+
+The installation of the dependency in your package is slightly different from the usual.
+You need to alias the default `emotion` implementation to the `styled-components` one.
+Depending on the bundler you are using, you made add it like this:
+
+### webpack
+
+```js
+module.exports = {
+  //...
+  resolve: {
+    alias: {
+      '@material-ui/styled-engine': '@material-ui/styled-engine-sc',
+    },
+  },
+};
+```
diff --git a/packages/material-ui-styled-engine-sc/package.json b/packages/material-ui-styled-engine-sc/package.json
new file mode 100644
index 00000000000000..ac5bec5129fe62
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@material-ui/styled-engine-sc",
+  "version": "5.0.0-alpha.8",
+  "private": false,
+  "author": "Material-UI Team",
+  "description": "Material-UI Styled - Wrapper package for styled utility.",
+  "main": "./src/index.js",
+  "keywords": [
+    "react",
+    "react-component",
+    "material design",
+    "material-ui",
+    "styled"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui-org/material-ui.git",
+    "directory": "packages/material-ui-styled"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui-org/material-ui/issues"
+  },
+  "homepage": "https://material-ui.com/styled/basics/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/material-ui"
+  },
+  "scripts": {
+    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:copy-files",
+    "build:cjs": "node ../../scripts/build cjs",
+    "build:esm": "node ../../scripts/build esm",
+    "build:es": "node ../../scripts/build es",
+    "build:copy-files": "node ../../scripts/copy-files.js",
+    "prebuild": "rimraf build",
+    "release": "yarn build && npm publish build --tag next",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-styles/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
+    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@types/styled-components": "5.1.3",
+    "styled-components": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/styled-components": {
+      "optional": true
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}
diff --git a/packages/material-ui-styled-engine-sc/src/index.d.ts b/packages/material-ui-styled-engine-sc/src/index.d.ts
new file mode 100644
index 00000000000000..b023957e85fe10
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/src/index.d.ts
@@ -0,0 +1,2 @@
+export * from 'styled-components';
+export { default } from 'styled-components';
diff --git a/packages/material-ui-styled-engine-sc/src/index.js b/packages/material-ui-styled-engine-sc/src/index.js
new file mode 100644
index 00000000000000..126204d13924d9
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/src/index.js
@@ -0,0 +1,12 @@
+import scStyled from 'styled-components';
+
+export default function styled(tag, options) {
+  if (options) {
+    return scStyled(tag).withConfig({
+      displayName: options.label,
+      shouldForwardProp: options.shouldForwardProp,
+    });
+  }
+
+  return scStyled(tag);
+}
diff --git a/packages/material-ui-styled-engine-sc/tsconfig.json b/packages/material-ui-styled-engine-sc/tsconfig.json
new file mode 100644
index 00000000000000..57220954971e1e
--- /dev/null
+++ b/packages/material-ui-styled-engine-sc/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src/**/*", "test/**/*"]
+}
diff --git a/packages/material-ui-styled-engine/README.md b/packages/material-ui-styled-engine/README.md
new file mode 100644
index 00000000000000..13c26c197056ee
--- /dev/null
+++ b/packages/material-ui-styled-engine/README.md
@@ -0,0 +1,3 @@
+# @material-ui/styled-engine
+
+This package is a wrapper around the `@emotion/styled` package. It is used internally in the `@material-ui/core` package. If you wish to use `styled-components` instead please use an alias to replace this package with `@material-ui/styled-engine-sc`.
diff --git a/packages/material-ui-styled-engine/package.json b/packages/material-ui-styled-engine/package.json
new file mode 100644
index 00000000000000..b485fb2438c3b9
--- /dev/null
+++ b/packages/material-ui-styled-engine/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@material-ui/styled-engine",
+  "version": "5.0.0-alpha.8",
+  "private": false,
+  "author": "Material-UI Team",
+  "description": "Material-UI Styled - Wrapper package for styled utility.",
+  "main": "./src/index.js",
+  "keywords": [
+    "react",
+    "react-component",
+    "material design",
+    "material-ui",
+    "styled"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui-org/material-ui.git",
+    "directory": "packages/material-ui-styled"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui-org/material-ui/issues"
+  },
+  "homepage": "https://material-ui.com/styled/basics/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/material-ui"
+  },
+  "scripts": {
+    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:copy-files",
+    "build:cjs": "node ../../scripts/build cjs",
+    "build:esm": "node ../../scripts/build esm",
+    "build:es": "node ../../scripts/build es",
+    "build:copy-files": "node ../../scripts/copy-files.js",
+    "prebuild": "rimraf build",
+    "release": "yarn build && npm publish build --tag next",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-styles/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
+    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}
diff --git a/packages/material-ui-styled-engine/src/index.d.ts b/packages/material-ui-styled-engine/src/index.d.ts
new file mode 100644
index 00000000000000..53bc27a1a267b7
--- /dev/null
+++ b/packages/material-ui-styled-engine/src/index.d.ts
@@ -0,0 +1,2 @@
+export * from '@emotion/styled';
+export { default } from '@emotion/styled';
diff --git a/packages/material-ui-styled-engine/src/index.js b/packages/material-ui-styled-engine/src/index.js
new file mode 100644
index 00000000000000..9b24cbd7fcb37d
--- /dev/null
+++ b/packages/material-ui-styled-engine/src/index.js
@@ -0,0 +1 @@
+export { default } from '@emotion/styled';
diff --git a/packages/material-ui-styled-engine/tsconfig.json b/packages/material-ui-styled-engine/tsconfig.json
new file mode 100644
index 00000000000000..57220954971e1e
--- /dev/null
+++ b/packages/material-ui-styled-engine/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src/**/*", "test/**/*"]
+}
diff --git a/packages/material-ui-styles/src/index.d.ts b/packages/material-ui-styles/src/index.d.ts
index 65d11adec915fe..baf467943fe9f6 100644
--- a/packages/material-ui-styles/src/index.d.ts
+++ b/packages/material-ui-styles/src/index.d.ts
@@ -34,6 +34,9 @@ export * from './useTheme';
 export { default as useThemeVariants } from './useThemeVariants';
 export * from './useThemeVariants';
 
+export { default as propsToClassKey } from './propsToClassKey';
+export * from './propsToClassKey';
+
 export { default as withStyles } from './withStyles';
 export * from './withStyles';
 
diff --git a/packages/material-ui-styles/src/index.js b/packages/material-ui-styles/src/index.js
index dd9aac3207d387..c390bed604f19a 100644
--- a/packages/material-ui-styles/src/index.js
+++ b/packages/material-ui-styles/src/index.js
@@ -61,6 +61,9 @@ export * from './useTheme';
 export { default as useThemeVariants } from './useThemeVariants';
 export * from './useThemeVariants';
 
+export { default as propsToClassKey } from './propsToClassKey';
+export * from './propsToClassKey';
+
 export { default as withStyles } from './withStyles';
 export * from './withStyles';
 
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index 7751b577aadd58..314b3df52db4ce 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -39,6 +39,8 @@
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json && tsc -p tsconfig.build.json"
   },
   "peerDependencies": {
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27",
     "@types/react": "^16.8.6",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
@@ -50,6 +52,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
+    "@material-ui/styled-engine": "^5.0.0-alpha.1",
     "@material-ui/styles": "^5.0.0-alpha.8",
     "@material-ui/system": "^5.0.0-alpha.6",
     "@material-ui/types": "^5.1.0",
diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts
index 45305dabef1a9c..34312c31654c96 100644
--- a/packages/material-ui/src/Slider/Slider.d.ts
+++ b/packages/material-ui/src/Slider/Slider.d.ts
@@ -208,6 +208,7 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
  * Demos:
  *
  * - [Slider](https://material-ui.com/components/slider/)
+ * - [Slider Styled](https://material-ui.com/components/slider-styled/)
  *
  * API:
  *
diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts
index 6307f05991a94b..8006e6928cbee4 100644
--- a/packages/material-ui/src/styles/index.d.ts
+++ b/packages/material-ui/src/styles/index.d.ts
@@ -15,6 +15,7 @@ export { default as responsiveFontSizes } from './responsiveFontSizes';
 export { ComponentsPropsList } from './props';
 export { Duration, Easing, Transitions, TransitionsOptions, duration, easing } from './transitions';
 export { default as useTheme } from './useTheme';
+export { default as useThemeProps } from './useThemeProps';
 export {
   default as withStyles,
   WithStyles,
@@ -23,6 +24,7 @@ export {
   StyledComponentProps,
 } from './withStyles';
 export { default as withTheme, WithTheme } from './withTheme';
+export { default as muiStyled } from './muiStyled';
 export { default as styled, ComponentCreator, StyledProps } from './styled';
 export {
   createGenerateClassName,
diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js
index 4da9e719bcdec9..6607732a24f0e1 100644
--- a/packages/material-ui/src/styles/index.js
+++ b/packages/material-ui/src/styles/index.js
@@ -9,8 +9,10 @@ export { default as responsiveFontSizes } from './responsiveFontSizes';
 export { default as styled } from './styled';
 export { duration, easing } from './transitions';
 export { default as useTheme } from './useTheme';
+export { default as useThemeProps } from './useThemeProps';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
+export { default as muiStyled } from './muiStyled';
 export {
   createGenerateClassName,
   jssPreset,
diff --git a/packages/material-ui/src/styles/muiStyled.d.ts b/packages/material-ui/src/styles/muiStyled.d.ts
new file mode 100644
index 00000000000000..bd9aca8a85a51e
--- /dev/null
+++ b/packages/material-ui/src/styles/muiStyled.d.ts
@@ -0,0 +1,208 @@
+import * as React from 'react';
+import * as CSS from 'csstype';
+
+export interface SerializedStyles {
+  name: string;
+  styles: string;
+  map?: string;
+  next?: SerializedStyles;
+}
+
+export type CSSProperties = CSS.PropertiesFallback<number | string>;
+export type CSSPropertiesWithMultiValues = {
+  [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>>;
+};
+/**
+ * @desc Following type exists for autocompletion of key.
+ */
+export type CSSPseudos<MP> = { [K in CSS.Pseudos]?: ObjectInterpolation<MP> };
+export interface CSSOthersObject<MP> {
+  [propertiesName: string]: Interpolation<MP>;
+}
+
+export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject };
+
+export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {}
+
+export type CSSInterpolation =
+  | null
+  | undefined
+  | boolean
+  | number
+  | string
+  | ComponentSelector
+  | Keyframes
+  | SerializedStyles
+  | CSSObject
+  | ArrayCSSInterpolation;
+
+export interface CSSOthersObjectForCSSObject {
+  [propertiesName: string]: CSSInterpolation;
+}
+
+export interface CSSObject
+  extends CSSPropertiesWithMultiValues,
+    CSSPseudosForCSSObject,
+    CSSOthersObjectForCSSObject {}
+
+export interface ComponentSelector {
+  __emotion_styles: any;
+}
+
+export type Keyframes = {
+  name: string;
+  styles: string;
+  anim: number;
+  toString: () => string;
+} & string;
+
+export interface ArrayInterpolation<MP> extends Array<Interpolation<MP>> {}
+export interface ObjectInterpolation<MP>
+  extends CSSPropertiesWithMultiValues,
+    CSSPseudos<MP>,
+    CSSOthersObject<MP> {}
+export type FunctionInterpolation<MP> = (mergedProps: MP) => Interpolation<MP>;
+
+export type Equal<A, B, T, F> = A extends B ? (B extends A ? T : F) : F;
+
+export type Interpolation<MP = undefined> =
+  | null
+  | undefined
+  | boolean
+  | number
+  | string
+  | ComponentSelector
+  | Keyframes
+  | SerializedStyles
+  | ArrayInterpolation<MP>
+  | ObjectInterpolation<MP>
+  | Equal<MP, undefined, never, FunctionInterpolation<MP>>;
+
+/**
+ * @desc Utility type for getting props type of React component.
+ */
+export type PropsOf<
+  C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>;
+
+export type Omit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never;
+export type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>;
+
+type JSXInEl = JSX.IntrinsicElements;
+type ReactClassPropKeys = keyof React.ClassAttributes<any>;
+
+export type WithTheme<P, T> = P extends { theme: infer Theme }
+  ? P & { theme: Exclude<Theme, undefined> }
+  : P & { theme: T };
+
+export interface StyledComponent<InnerProps, StyleProps, Theme extends object>
+  extends React.FunctionComponent<InnerProps & StyleProps & { theme?: Theme }>,
+    ComponentSelector {
+  /**
+   * @desc this method is type-unsafe
+   */
+  withComponent<NewTag extends keyof JSXInEl>(
+    tag: NewTag
+  ): StyledComponent<JSXInEl[NewTag], StyleProps, Theme>;
+  withComponent<Tag extends React.ComponentType<any>>(
+    tag: Tag
+  ): StyledComponent<PropsOf<Tag>, StyleProps, Theme>;
+}
+
+interface CreateStyledComponentBaseThemed<
+  InnerProps,
+  ExtraProps,
+  StyledInstanceTheme extends object
+> {
+  <
+    StyleProps extends Omit<Overwrapped<InnerProps, StyleProps>, ReactClassPropKeys> = Omit<
+      InnerProps & ExtraProps,
+      ReactClassPropKeys
+    >
+  >(
+    ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
+  ): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;
+  <
+    StyleProps extends Omit<Overwrapped<InnerProps, StyleProps>, ReactClassPropKeys> = Omit<
+      InnerProps & ExtraProps,
+      ReactClassPropKeys
+    >
+  >(
+    template: TemplateStringsArray,
+    ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
+  ): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;
+}
+
+interface CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> {
+  <
+    StyleProps extends Omit<Overwrapped<InnerProps, StyleProps>, ReactClassPropKeys> = Omit<
+      InnerProps & ExtraProps,
+      ReactClassPropKeys
+    >,
+    Theme extends object = object
+  >(
+    ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
+  ): StyledComponent<InnerProps, StyleProps, Theme>;
+  <
+    StyleProps extends Omit<Overwrapped<InnerProps, StyleProps>, ReactClassPropKeys> = Omit<
+      InnerProps & ExtraProps,
+      ReactClassPropKeys
+    >,
+    Theme extends object = object
+  >(
+    template: TemplateStringsArray,
+    ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
+  ): StyledComponent<InnerProps, StyleProps, Theme>;
+}
+
+export type CreateStyledComponentBase<InnerProps, ExtraProps, StyledInstanceTheme extends object> =
+  // this "reversed" condition checks if StyledInstanceTheme was already parametrized when using CreateStyled
+  object extends StyledInstanceTheme
+    ? CreateStyledComponentBaseThemeless<InnerProps, ExtraProps>
+    : CreateStyledComponentBaseThemed<InnerProps, ExtraProps, StyledInstanceTheme>;
+
+export type CreateStyledComponentIntrinsic<
+  Tag extends keyof JSXInEl,
+  ExtraProps,
+  Theme extends object
+> = CreateStyledComponentBase<JSXInEl[Tag], ExtraProps, Theme>;
+export type CreateStyledComponentExtrinsic<
+  Tag extends React.ComponentType<any>,
+  ExtraProps,
+  Theme extends object
+> = CreateStyledComponentBase<PropsOf<Tag>, ExtraProps, Theme>;
+
+export interface StyledOptions {
+  label?: string;
+  shouldForwardProp?(propName: string): boolean;
+  target?: string;
+}
+
+interface MuiStyledOptions<Theme extends object = any> {
+  muiName: string;
+  overridesResolver?: (props: any, styles: string | object, name: string) => string | object;
+}
+
+export interface CreateStyled<Theme extends object = any> {
+  <Tag extends React.ComponentType<any>, ExtraProps = {}>(
+    tag: Tag,
+    options?: StyledOptions,
+    muiOptions?: MuiStyledOptions<Theme>
+  ): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>;
+
+  <Tag extends keyof JSXInEl, ExtraProps = {}>(
+    tag: Tag,
+    options?: StyledOptions,
+    muiOptions?: MuiStyledOptions<Theme>
+  ): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme>;
+}
+
+/**
+ * Cutom styled functionality that support mui specific config.
+ *
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @returns A complete, ready to use theme object.
+ */
+declare const muiStyled: CreateStyled;
+
+export default muiStyled;
diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js
new file mode 100644
index 00000000000000..d86f27239a4752
--- /dev/null
+++ b/packages/material-ui/src/styles/muiStyled.js
@@ -0,0 +1,80 @@
+import styled from '@material-ui/styled-engine';
+import { propsToClassKey } from '@material-ui/styles';
+import defaultTheme from './defaultTheme';
+
+const getStyleOverrides = (name, theme) => {
+  let styleOverrides = {};
+
+  if (
+    theme &&
+    theme.components &&
+    theme.components[name] &&
+    theme.components[name].styleOverrides
+  ) {
+    styleOverrides = theme.components[name].styleOverrides;
+  }
+
+  return styleOverrides;
+};
+
+const getVariantStyles = (name, theme) => {
+  let variants = [];
+  if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
+    variants = theme.components[name].variants;
+  }
+
+  const variantsStyles = {};
+
+  variants.forEach((definition) => {
+    const key = propsToClassKey(definition.props);
+    variantsStyles[key] = definition.style;
+  });
+
+  return variantsStyles;
+};
+
+const variantsResolver = (props, styles, theme, name) => {
+  const { styleProps = {} } = props;
+  let variantsStyles = {};
+  const themeVariants = theme?.components?.[name]?.variants;
+  if (themeVariants) {
+    themeVariants.forEach((themeVariant) => {
+      let isMatch = true;
+      Object.keys(themeVariant.props).forEach((key) => {
+        if (styleProps[key] !== themeVariant.props[key]) {
+          isMatch = false;
+        }
+      });
+      if (isMatch) {
+        variantsStyles = { ...variantsStyles, ...styles[propsToClassKey(themeVariant.props)] };
+      }
+    });
+  }
+
+  return variantsStyles;
+};
+
+const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme';
+
+const muiStyled = (tag, options, muiOptions) => {
+  const name = muiOptions.muiName;
+  const defaultStyledResolver = styled(tag, { shouldForwardProp, label: name, ...options });
+  const muiStyledResolver = (...styles) => {
+    if (muiOptions.overridesResolver) {
+      styles.push((props) => {
+        const theme = props.theme || defaultTheme;
+        return muiOptions.overridesResolver(props, getStyleOverrides(name, theme), name);
+      });
+    }
+
+    styles.push((props) => {
+      const theme = props.theme || defaultTheme;
+      return variantsResolver(props, getVariantStyles(name, theme), theme, name);
+    });
+
+    return defaultStyledResolver(...styles);
+  };
+  return muiStyledResolver;
+};
+
+export default muiStyled;
diff --git a/packages/material-ui/src/styles/useThemeProps.d.ts b/packages/material-ui/src/styles/useThemeProps.d.ts
new file mode 100644
index 00000000000000..dd6e8d795752f8
--- /dev/null
+++ b/packages/material-ui/src/styles/useThemeProps.d.ts
@@ -0,0 +1,15 @@
+export interface ThemeWithProps<Components> {
+  components?: { [K in keyof Components]: { defaultProps?: Partial<Components[K]> } };
+}
+
+export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+  components: Record<Name, { defaultProps: infer Props }>;
+}
+  ? Props
+  : {};
+
+export default function useThemeProps<
+  Theme extends ThemeWithProps<any>,
+  Props,
+  Name extends keyof any
+>(params: { props: Props; name: Name }): Props & ThemedProps<Theme, Name>;
diff --git a/packages/material-ui/src/styles/useThemeProps.js b/packages/material-ui/src/styles/useThemeProps.js
new file mode 100644
index 00000000000000..2187292b2053e1
--- /dev/null
+++ b/packages/material-ui/src/styles/useThemeProps.js
@@ -0,0 +1,20 @@
+import { getThemeProps } from '@material-ui/styles';
+import useTheme from './useTheme';
+import defaultTheme from './defaultTheme';
+
+export default function useThemeProps({ props: inputProps, name }) {
+  const props = { ...inputProps };
+
+  const contextTheme = useTheme() || defaultTheme;
+
+  const more = getThemeProps({ theme: contextTheme, name, props });
+
+  const theme = more.theme || contextTheme;
+  const isRtl = theme.direction === 'rtl';
+
+  return {
+    theme,
+    isRtl,
+    ...more,
+  };
+}
diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js
index 1f988a2937601a..a95d9d87918595 100644
--- a/scripts/sizeSnapshot/webpack.config.js
+++ b/scripts/sizeSnapshot/webpack.config.js
@@ -116,6 +116,14 @@ module.exports = async function webpackConfig() {
       alias: {
         '@material-ui/core': path.join(workspaceRoot, 'packages/material-ui/build'),
         '@material-ui/lab': path.join(workspaceRoot, 'packages/material-ui-lab/build'),
+        '@material-ui/styled-engine': path.join(
+          workspaceRoot,
+          'packages/material-ui-styled-engine/build',
+        ),
+        '@material-ui/styled-engine-sc': path.join(
+          workspaceRoot,
+          'packages/material-ui-styles-sc/build',
+        ),
         '@material-ui/styles': path.join(workspaceRoot, 'packages/material-ui-styles/build'),
         '@material-ui/system': path.join(workspaceRoot, 'packages/material-ui-system/build'),
         '@material-ui/utils': path.join(workspaceRoot, 'packages/material-ui-utils/build'),
diff --git a/tsconfig.json b/tsconfig.json
index 08eef2acb1c91a..63439ca95da593 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,10 @@
       "@material-ui/icons": ["./packages/material-ui-icons/src"],
       "@material-ui/lab": ["./packages/material-ui-lab/src"],
       "@material-ui/lab/*": ["./packages/material-ui-lab/src/*"],
+      "@material-ui/styled-engine": ["./packages/material-ui-styled-engine/src"],
+      "@material-ui/styled-engine/*": ["./packages/material-ui-styled-engine/src/*"],
+      "@material-ui/styled-engine-sc": ["./packages/material-ui-styled-engine-sc/src"],
+      "@material-ui/styled-engine-sc/*": ["./packages/material-ui-styled-engine-sc/src/*"],
       "@material-ui/styles": ["./packages/material-ui-styles/src"],
       "@material-ui/styles/*": ["./packages/material-ui-styles/src/*"],
       "@material-ui/system": ["./packages/material-ui-system/src"],
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 331edf3ba2df71..41b270935f116c 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -11,6 +11,14 @@ module.exports = {
       '@material-ui/docs': path.resolve(__dirname, './packages/material-ui-docs/src'),
       '@material-ui/icons': path.resolve(__dirname, './packages/material-ui-icons/src'),
       '@material-ui/lab': path.resolve(__dirname, './packages/material-ui-lab/src'),
+      '@material-ui/styled-engine': path.resolve(
+        __dirname,
+        './packages/material-ui-styled-engine/src',
+      ),
+      '@material-ui/styled-engine-sc': path.resolve(
+        __dirname,
+        './packages/material-ui-styled-engine-sc/src',
+      ),
       '@material-ui/styles': path.resolve(__dirname, './packages/material-ui-styles/src'),
       '@material-ui/system': path.resolve(__dirname, './packages/material-ui-system/src'),
       '@material-ui/utils': path.resolve(__dirname, './packages/material-ui-utils/src'),
diff --git a/yarn.lock b/yarn.lock
index f5576bcd1978ad..aef83f55a50ee6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5810,6 +5810,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssjanus@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-1.3.2.tgz#7c23d39be92f63e1557a75c015f61d95009bd6b3"
+  integrity sha512-5pM/C1MIfoqhXa7k9PqSnrjj1SSZDakfyB1DZhdYyJoDUH+evGbsUg6/bpQapTJeSnYaj0rdzPUMeM33CvB0vw==
+
 cssnano-preset-default@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
@@ -15414,6 +15419,13 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis-plugin-rtl@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/stylis-plugin-rtl/-/stylis-plugin-rtl-1.1.0.tgz#028d72419ccc47eeaaec684f3e192534f2c57ece"
+  integrity sha512-FPoSxP+gbBLJRUXDRDFNBhqy/eToquDLn7ZrjIVBRfXaZ9bunwNnDtDm2qW1EoU0c93krm1Dy+8iVmJpjRGsKw==
+  dependencies:
+    cssjanus "^1.3.0"
+
 stylis-rule-sheet@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"