fix: preserve pushable gaps on track clicks

Author: nrps9909

src/Slider.tsx

@@ -395,15 +395,34 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       });
 
       let focusIndex: number;
+      let valueOffset = 0;
 
-      if (effectiveRangeEditable && valueDist !== 0 && (!maxCount || rawValues.length < maxCount)) {
+      if (!rawValues.length) {
+        cloneNextValues.push(newValue);
+        focusIndex = 0;
+      } else if (
+        effectiveRangeEditable &&
+        valueDist !== 0 &&
+        (!maxCount || rawValues.length < maxCount)
+      ) {
         cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
         focusIndex = valueBeforeIndex + 1;
       } else {
-        cloneNextValues[valueIndex] = newValue;
+        valueOffset = newValue - rawValues[valueIndex];
         focusIndex = valueIndex;
       }
 
+      if (rawValues.length) {
+        // Keep track clicks consistent with drag and keyboard constraints.
+        const { values: nextValues } = offsetValues(
+          cloneNextValues,
+          valueOffset,
+          focusIndex,
+          'dist',
+        );
+        cloneNextValues.splice(0, cloneNextValues.length, ...nextValues);
+      }
+
       // Fill value to match default 2 (only when `rawValues` is empty)
       if (rangeEnabled && !rawValues.length && count === undefined) {
         cloneNextValues.push(newValue);

tests/Range.test.tsx

@@ -856,6 +856,35 @@ describe('Range', () => {
     });
   });
 
+  it('keeps pushable when clicking the track', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Slider range defaultValue={[20, 40]} pushable={20} onChange={onChange} />,
+    );
+
+    doMouseDown(container, 30, 'rc-slider', true);
+    fireEvent.mouseUp(document);
+
+    expect(onChange).toHaveBeenLastCalledWith([10, 30]);
+  });
+
+  it('keeps pushable when inserting an editable handle', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Slider
+        range={{ editable: true }}
+        defaultValue={[20, 40]}
+        pushable={20}
+        onChange={onChange}
+      />,
+    );
+
+    doMouseDown(container, 30, 'rc-slider', true);
+    fireEvent.mouseUp(document);
+
+    expect(onChange).toHaveBeenLastCalledWith([10, 30, 50]);
+  });
+
   describe('disabled as array', () => {
     const getHandle = (container: HTMLElement, index = 0) =>
       container.getElementsByClassName('rc-slider-handle')[index] as HTMLElement;