diff --git a/docs/src/pages/components/slider/NonLinearSlider.js b/docs/src/pages/components/slider/NonLinearSlider.js
new file mode 100644
index 00000000000000..b930caaa1bee19
--- /dev/null
+++ b/docs/src/pages/components/slider/NonLinearSlider.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+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 (
+
+
+ Temperature range
+
+ x ** 10}
+ getAriaValueText={valueLabelFormat}
+ valueLabelFormat={valueLabelFormat}
+ onChange={handleChange}
+ valueLabelDisplay="auto"
+ aria-labelledby="non-linear-slider"
+ />
+
+ );
+}
diff --git a/docs/src/pages/components/slider/NonLinearSlider.tsx b/docs/src/pages/components/slider/NonLinearSlider.tsx
new file mode 100644
index 00000000000000..4b5757c3884e65
--- /dev/null
+++ b/docs/src/pages/components/slider/NonLinearSlider.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+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(1);
+
+ const handleChange = (event: any, newValue: number | number[]) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+ Temperature range
+
+ x ** 10}
+ getAriaValueText={valueLabelFormat}
+ valueLabelFormat={valueLabelFormat}
+ onChange={handleChange}
+ valueLabelDisplay="auto"
+ aria-labelledby="non-linear-slider"
+ />
+
+ );
+}
diff --git a/docs/src/pages/components/slider/slider.md b/docs/src/pages/components/slider/slider.md
index 9fab570f773b4a..be58a3f5205ba4 100644
--- a/docs/src/pages/components/slider/slider.md
+++ b/docs/src/pages/components/slider/slider.md
@@ -64,6 +64,13 @@ The track can be inverted with `track="inverted"`.
{{"demo": "pages/components/slider/TrackInvertedSlider.js"}}
+## Non-linear scale
+
+You can use the `scale` prop to represent the `value` in a different scale.
+For instance, in the following demo, the value *x* represents the power of *10^x*.
+
+{{"demo": "pages/components/slider/NonLinearSlider.js"}}
+
## Accessibility
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider)
diff --git a/docs/src/pages/components/steppers/steppers.md b/docs/src/pages/components/steppers/steppers.md
index 2d72b4a146d81b..5a2a76547ea7d8 100644
--- a/docs/src/pages/components/steppers/steppers.md
+++ b/docs/src/pages/components/steppers/steppers.md
@@ -50,13 +50,13 @@ determine when all steps are completed (or even if they need to be completed).
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js", "bg": true}}
-### Non Linear - Alternative Label
+### Non-linear - Alternative Label
Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js", "bg": true}}
-### Non Linear - Error Step
+### Non-linear - Error Step
{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js", "bg": true}}
diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts
index 576e7e524be66e..dc59eebbb25256 100644
--- a/packages/material-ui/src/Slider/Slider.d.ts
+++ b/packages/material-ui/src/Slider/Slider.d.ts
@@ -35,6 +35,7 @@ export interface SliderProps
onChangeCommitted?: (event: React.ChangeEvent<{}>, value: number | number[]) => void;
orientation?: 'horizontal' | 'vertical';
step?: number | null;
+ scale?: (value: number) => number;
ThumbComponent?: React.ElementType>;
track?: 'normal' | false | 'inverted';
value?: number | number[];