diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index 99663febd19ee6..62443a7a2b4123 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -746,11 +746,15 @@ const Slider = React.forwardRef(function Slider(props, ref) {
if (track === false) {
markActive = values.indexOf(mark.value) !== -1;
} else {
- const isMarkActive = range
- ? mark.value >= values[0] && mark.value <= values[values.length - 1]
- : mark.value <= values[0];
markActive =
- (isMarkActive && track === 'normal') || (!isMarkActive && track === 'inverted');
+ (track === 'normal' &&
+ (range
+ ? mark.value >= values[0] && mark.value <= values[values.length - 1]
+ : mark.value <= values[0])) ||
+ (track === 'inverted' &&
+ (range
+ ? mark.value <= values[0] || mark.value >= values[values.length - 1]
+ : mark.value >= values[0]));
}
return (
diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js
index d87129d6b9b469..568b1ff7b86be3 100644
--- a/packages/material-ui/src/Slider/Slider.test.js
+++ b/packages/material-ui/src/Slider/Slider.test.js
@@ -409,27 +409,41 @@ describe('', () => {
const marks = [{ value: 5 }, { value: 10 }, { value: 15 }];
const { container: container1 } = render(
- ,
+ ,
);
expect(getActives(container1)).to.deep.equal([true, true, false]);
const { container: container2 } = render(
- ,
+ ,
);
expect(getActives(container2)).to.deep.equal([false, true, false]);
});
it('uses closed intervals for the within check', () => {
const { container: container1 } = render(
- ,
+ ,
);
expect(getActives(container1)).to.deep.equal([true, true, true]);
const { container: container2 } = render(
- ,
+ ,
);
expect(getActives(container2)).to.deep.equal([true, true, false]);
});
+
+ it('should support inverted track', () => {
+ const marks = [{ value: 5 }, { value: 10 }, { value: 15 }];
+
+ const { container: container1 } = render(
+ ,
+ );
+ expect(getActives(container1)).to.deep.equal([false, false, true]);
+
+ const { container: container2 } = render(
+ ,
+ );
+ expect(getActives(container2)).to.deep.equal([true, false, true]);
+ });
});
it('should forward mouseDown', () => {