Skip to content

Commit 9a224bf

Browse files
authored
fix: fix marks position (#630)
* fix: fix marks position * test: add test case
1 parent 543ba9b commit 9a224bf

File tree

2 files changed

+9
-5
lines changed

2 files changed

+9
-5
lines changed

src/common/Marks.jsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,9 @@ const Marks = ({
3939
};
4040

4141
const leftStyle = {
42-
transform: `translateX(-50%)`,
43-
msTransform: `translateX(-50%)`,
44-
[reverse ? 'right' : 'left']: reverse
45-
? `${(point - (min / 4)) / range * 100}%`
46-
: `${(point - min) / range * 100}%`,
42+
transform: `translateX(${reverse ? `50%` : `-50%`})`,
43+
msTransform: `translateX(${reverse ? `50%` : `-50%`})`,
44+
[reverse ? 'right' : 'left']: `${(point - min) / range * 100}%`
4745
};
4846

4947
const style = vertical ? bottomStyle : leftStyle;

tests/Slider.test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,12 @@ describe('Slider', () => {
8383
expect(trackStyle.width).toMatch('20%');
8484
});
8585

86+
it('should render reverse Slider with marks correctly', () => {
87+
const marks = {5:'5', 6:'6', 7:'7', 8:'8', 9:'9', 10:'10'};
88+
const wrapper = mount(<Slider value={0} marks={marks} min={5} max={10} reverse />);
89+
expect(wrapper.find('.rc-slider-mark-text').at(0).props().style.right).toMatch('0%');
90+
});
91+
8692
it('should render Slider without handle if value is null', () => {
8793
const wrapper = render(<Slider value={null} />);
8894
expect(wrapper).toMatchSnapshot();

0 commit comments

Comments
 (0)