chore: update

react-component · May 30, 2023 · 8092679 · 8092679
1 parent b1b83b3
commit 8092679
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -186,9 +186,8 @@
     }
 
     &-track-draggable {
-      z-index: 1;
-      box-sizing: content-box;
-      background-clip: content-box;
+      border-top:0;
+      border-bottom: 0;
       border-right: 5px solid rgba(0, 0, 0, 0);
       border-left: 5px solid rgba(0, 0, 0, 0);
       transform: translateX(-5px);

diff --git a/src/Tracks/Track.tsx b/src/Tracks/Track.tsx
@@ -18,7 +18,6 @@ export default function Track(props: TrackProps) {
   const { direction, min, max, disabled, range } = React.useContext(SliderContext);
 
   const trackPrefixCls = `${prefixCls}-track`;
-  const draggableTrackPrefixCls = onStartMove ? `${prefixCls}-track-draggable` : null;
 
   const offsetStart = getOffset(start, min, max);
   const offsetEnd = getOffset(end, min, max);
@@ -56,11 +55,10 @@ export default function Track(props: TrackProps) {
 
   return (
     <div
-      className={classNames(
-        trackPrefixCls,
-        range && `${trackPrefixCls}-${index + 1}`,
-        draggableTrackPrefixCls,
-      )}
+      className={classNames(trackPrefixCls, {
+        [`${trackPrefixCls}-${index + 1}`]: range,
+        [`${prefixCls}-track-draggable`]: onStartMove,
+      })}
       style={{
         ...positionStyle,
         ...style,

diff --git a/tests/Range.test.js b/tests/Range.test.js
@@ -526,4 +526,24 @@ describe('Range', () => {
     );
     errorSpy.mockRestore();
   });
+
+  it('Track should have the correct thickness', () => {
+    const { container } = render(
+      <Slider range allowCross={false} reverse defaultValue={[0, 40]} draggableTrack />,
+    );
+
+    const { container: containerVertical } = render(
+      <Slider
+        range
+        allowCross={false}
+        reverse
+        defaultValue={[0, 40]}
+        draggableTrack
+        vertical
+        style={{ height: '300px' }}
+      />,
+    );
+    expect(container.querySelector('.rc-slider-track-draggable')).toBeTruthy();
+    expect(containerVertical.querySelector('.rc-slider-track-draggable')).toBeTruthy();
+  });
 });