diff --git a/docs/pages/api/slider.md b/docs/pages/api/slider.md
index 27e1efbc6e09aa..19acbdb2d362c9 100644
--- a/docs/pages/api/slider.md
+++ b/docs/pages/api/slider.md
@@ -34,7 +34,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| disabled | bool | false | If `true`, the slider will be disabled. |
| getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
**Signature:**
`function(index: number) => string`
*index:* The thumb label's index to format. |
| getAriaValueText | func | | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
**Signature:**
`function(value: number, index: number) => string`
*value:* The thumb label's value to format.
*index:* The thumb label's index to format. |
-| marks | bool
| array | [] | 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. |
+| marks | bool
| array | false | 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. |
| max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. |
| min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. |
| name | string | | Name attribute of the hidden `input` element. |
diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index f90c5fe9ba71cf..9f34e926d23a3d 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -123,7 +123,6 @@ const axisProps = {
},
};
-const defaultMarks = [];
const Identity = x => x;
export const styles = theme => ({
@@ -347,7 +346,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
disabled = false,
getAriaLabel,
getAriaValueText,
- marks: marksProp = defaultMarks,
+ marks: marksProp = false,
max = 100,
min = 0,
name,
@@ -388,7 +387,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
value: min + step * index,
}))
- : marksProp;
+ : marksProp || [];
instanceRef.current = {
source: valueDerived, // Keep track of the input value to leverage immutable state comparison.
@@ -505,57 +504,54 @@ const Slider = React.forwardRef(function Slider(props, ref) {
axis += '-reverse';
}
- const getFingerNewValue = React.useCallback(
- ({ 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;
- }
+ const getFingerNewValue = ({ finger, move = false, values: values2, source }) => {
+ const { current: slider } = sliderRef;
+ const { width, height, bottom, left } = slider.getBoundingClientRect();
+ let percent;
- if (axis.indexOf('-reverse') !== -1) {
- percent = 1 - percent;
- }
+ if (axis.indexOf('vertical') === 0) {
+ percent = (bottom - finger.y) / height;
+ } else {
+ percent = (finger.x - left) / width;
+ }
- 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];
- }
+ if (axis.indexOf('-reverse') !== -1) {
+ percent = 1 - percent;
+ }
- newValue = clamp(newValue, min, max);
- let activeIndex = 0;
+ 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];
+ }
- if (range) {
- if (!move) {
- activeIndex = findClosest(values2, newValue);
- } else {
- activeIndex = previousIndex.current;
- }
+ newValue = clamp(newValue, min, max);
+ let activeIndex = 0;
- const previousValue = newValue;
- newValue = setValueIndex({
- values: values2,
- source,
- newValue,
- index: activeIndex,
- }).sort(asc);
- activeIndex = newValue.indexOf(previousValue);
- previousIndex.current = activeIndex;
+ if (range) {
+ if (!move) {
+ activeIndex = findClosest(values2, newValue);
+ } else {
+ activeIndex = previousIndex.current;
}
- return { newValue, activeIndex };
- },
- [max, min, axis, range, step, marks],
- );
+ 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(event => {
const finger = trackFinger(event, touchId);