add demo

Author: oliviertassinari

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 (
+    <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>
+  );
+}

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<number | number[]>(1);
+
+  const handleChange = (event: any, 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>
+  );
+}

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)

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-kinear - Error Step
 
 {{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js", "bg": true}}
 

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<React.HTMLAttributes<HTMLSpanElement>>;
   track?: 'normal' | false | 'inverted';
   value?: number | number[];