fix: slider track draggale range height/width error (#908)

* fix: slider track draggale range height/width error * chore: update --------- Co-authored-by: 洋 <hetongyang@bytedance.com>
react-component · May 30, 2023 · 26c8bd7 · 26c8bd7
1 parent a951a0b
commit 26c8bd7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/assets/index.less b/assets/index.less
@@ -45,6 +45,15 @@
     border-radius: @border-radius-base;
   }
 
+  &-track-draggable {
+    z-index: 1;
+    box-sizing: content-box;
+    background-clip: content-box;
+    border-top: 5px solid rgba(0, 0, 0, 0);
+    border-bottom: 5px solid rgba(0, 0, 0, 0);
+    transform: translateY(-5px);
+  }
+
   &-handle {
     position: absolute;
     width: 14px;
@@ -175,6 +184,14 @@
       left: 5px;
       width: 4px;
     }
+
+    &-track-draggable {
+      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);
+    }
 
     &-handle {
       margin-top: 0;

diff --git a/src/Tracks/Track.tsx b/src/Tracks/Track.tsx
@@ -55,7 +55,10 @@ export default function Track(props: TrackProps) {
 
   return (
     <div
-      className={classNames(trackPrefixCls, range && `${trackPrefixCls}-${index + 1}`)}
+      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();
+  });
 });