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', () => {