diff --git a/src/common/Marks.jsx b/src/common/Marks.jsx index ca7dc53a6..80ab01db2 100644 --- a/src/common/Marks.jsx +++ b/src/common/Marks.jsx @@ -39,11 +39,9 @@ const Marks = ({ }; const leftStyle = { - transform: `translateX(-50%)`, - msTransform: `translateX(-50%)`, - [reverse ? 'right' : 'left']: reverse - ? `${(point - (min / 4)) / range * 100}%` - : `${(point - min) / range * 100}%`, + transform: `translateX(${reverse ? `50%` : `-50%`})`, + msTransform: `translateX(${reverse ? `50%` : `-50%`})`, + [reverse ? 'right' : 'left']: `${(point - min) / range * 100}%` }; const style = vertical ? bottomStyle : leftStyle; diff --git a/tests/Slider.test.js b/tests/Slider.test.js index a15145d4e..4d45de109 100644 --- a/tests/Slider.test.js +++ b/tests/Slider.test.js @@ -83,6 +83,12 @@ describe('Slider', () => { expect(trackStyle.width).toMatch('20%'); }); + it('should render reverse Slider with marks correctly', () => { + const marks = {5:'5', 6:'6', 7:'7', 8:'8', 9:'9', 10:'10'}; + const wrapper = mount(); + expect(wrapper.find('.rc-slider-mark-text').at(0).props().style.right).toMatch('0%'); + }); + it('should render Slider without handle if value is null', () => { const wrapper = render(); expect(wrapper).toMatchSnapshot();