add demo

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-linear - 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[];