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