fix: fixed the problem that the handle position of Slider is incorrect when clicking or dragging under scrollable conditions

cypress/e2e/slider.spec.js

@@ -231,4 +231,27 @@ describe('slider', () => {
         cy.get('.semi-slider-handle').eq(0).trigger('mouseover');
         cy.get('.semi-slider-handle-tooltip').eq(0).should('have.text', '0');
     });
+
+    it('should update value correctly in a scrollable container', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=slider--fix-2931&args=&viewMode=story', {
+            onBeforeLoad(win) {
+                cy.stub(win.console, 'log').as('consoleLog');
+            },
+        });
+        const parentSelector = '#horizontal-slider-container';
+        const sliderHandleSelector = `${parentSelector} .semi-slider-handle`;
+        const sliderTrackSelector = `${parentSelector} .semi-slider-rail`;
+
+        // Scroll the container to the right
+        cy.get(parentSelector).scrollTo('right');
+
+        // test track click
+        let handleInitialPos;
+        cy.get(sliderHandleSelector).then(($handle) => {
+            handleInitialPos = $handle.position();
+        });
+
+        cy.get(sliderTrackSelector).trigger('click', { pageX: 500, pageY: 0, force: true });
+        cy.get('@consoleLog').should('be.calledWith', 'value改变了50');
+    });
 });

packages/semi-foundation/slider/foundation.ts

@@ -229,10 +229,9 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      */
     handleMousePos = (clientX: number, clientY: number) => {
         const parentRect = this._adapter.getParentRect();
-        const scrollParent = this._adapter.getScrollParentVal();
         const parentX = parentRect ? parentRect.left : 0;
         const parentY = parentRect ? parentRect.top : 0;
-        return { x: clientX - parentX + scrollParent.scrollLeft, y: clientY - parentY + scrollParent.scrollTop };
+        return { x: clientX - parentX, y: clientY - parentY };
     };
 
     /**
@@ -383,7 +382,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      * @memberof SliderFoundation
      */
     outPutValue = (inputValue: SliderProps['value']) => {
-        const checkHowManyDecimals = (num: number)=>{
+        const checkHowManyDecimals = (num: number) => {
             const reg = /^\d+(\.\d+)?$/;
             if (reg.test(String(num))) {
                 return num.toString().split('.')[1]?.length ?? 0;
@@ -391,10 +390,10 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
             return 0;
         };
         const step = this._adapter.getProp('step');
-        const transWay = (()=>{
+        const transWay = (() => {
             const decimals = checkHowManyDecimals(step);
             const multipler = Math.pow(10, decimals);
-            return (value: number)=>{
+            return (value: number) => {
                 return Math.round(value * multipler) / multipler;
             };
         })();

packages/semi-ui/slider/_story/slider.stories.jsx

@@ -435,3 +435,51 @@ export const RangeMinSlider = () => (
 RangeMinSlider.story = {
   name: 'range min slider',
 };
+
+export const Fix2931 = () => (
+  <div>
+    <h3>horizontal</h3>
+    <div style={{ display: 'flex', width: '100%', height: '200px', marginLeft: '100px' }}>
+      <div 
+        id="horizontal-slider-container" 
+        style={{ 
+          flex: 1, 
+          overflow: "auto", 
+          backgroundColor: 'lightPink', 
+          position: 'relative' 
+        }}
+      >
+        <Slider 
+          style={{ width: 2000 }} 
+          showBoundary 
+          onChange={value => {
+            console.log('value改变了' + value);
+          }}
+        />
+      </div>
+      <div style={{ width: 300, backgroundColor: 'lightBlue' }}></div>
+    </div>
+    <h3>vertical</h3>
+    <div style={{ display: 'flex', width: '100%', height: '200px', marginTop: '100px' }}>
+      <div 
+        id="vertical-slider-container" 
+        style={{ 
+          flex: 1, 
+          overflow: "auto", 
+          backgroundColor: 'lightPink', 
+          position: 'relative' 
+        }}>
+        <Slider 
+          style={{ height: 2000 }} 
+          vertical 
+          showBoundary 
+          onChange={value => {
+            console.log('value改变了' + value);
+          }} 
+          />
+      </div>
+      <div style={{ width: 300, backgroundColor: 'lightBlue' }}></div>
+    </div>
+
+  </div>
+);