fix(Slider): slider thumb shifts when dragged (#1710)

zernonia · web-flow · commit 01a3b27818ad · 2025-03-15T14:59:42.000+08:00
* refactor: replace prop with `thumbAlignment`

* fix: cursor misalign with the thumb when sliding

* chore: add story
diff --git a/packages/core/src/Slider/SliderHorizontal.vue b/packages/core/src/Slider/SliderHorizontal.vue
@@ -4,6 +4,7 @@ import { computed, ref, toRefs } from 'vue'
 import type { Direction, SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'
 import { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'
 import { useForwardExpose } from '@/shared'
+import { injectSliderRootContext } from './SliderRoot.vue'
 
 interface SliderHorizontalProps extends SliderOrientationPrivateProps {
   dir?: Direction
@@ -14,18 +15,35 @@ const emits = defineEmits<SliderOrientationPrivateEmits>()
 const { max, min, dir, inverted } = toRefs(props)
 
 const { forwardRef, currentElement: sliderElement } = useForwardExpose()
+const rootContext = injectSliderRootContext()
 
+const offsetPosition = ref<number>()
 const rectRef = ref<ClientRect>()
 const isSlidingFromLeft = computed(() => (dir?.value === 'ltr' && !inverted.value) || (dir?.value !== 'ltr' && inverted.value))
 
-function getValueFromPointer(pointerPosition: number) {
+function getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {
   const rect = rectRef.value || sliderElement.value!.getBoundingClientRect()
-  const input: [number, number] = [0, rect.width]
+
+  // Get the currently active thumb element
+  const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value]
+  const thumbWidth = rootContext.thumbAlignment.value === 'contain' ? thumb.clientWidth : 0
+
+  // Calculate offset for dragging, but only when needed
+  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {
+    offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left
+  }
+
+  // Define the input range (slider track width minus thumb width)
+  const input: [number, number] = [0, rect.width - thumbWidth]
   const output: [number, number] = isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value]
   const value = linearScale(input, output)
 
   rectRef.value = rect
-  return value(pointerPosition - rect.left)
+  const position = slideStart
+    ? event.clientX - rect.left - thumbWidth / 2
+    : event.clientX - rect.left - (offsetPosition.value ?? 0)
+
+  return value(position)
 }
 
 provideSliderOrientationContext({
@@ -42,18 +60,20 @@ provideSliderOrientationContext({
     :dir="dir"
     data-orientation="horizontal"
     :style="{
-      ['--reka-slider-thumb-transform' as any]: 'translateX(-50%)',
+      ['--reka-slider-thumb-transform' as any]:
+        !isSlidingFromLeft && rootContext.thumbAlignment.value === 'overflow' ? 'translateX(50%)' : 'translateX(-50%)',
     }"
     @slide-start="(event) => {
-      const value = getValueFromPointer(event.clientX);
+      const value = getValueFromPointerEvent(event, true);
       emits('slideStart', value)
     }"
     @slide-move="(event) => {
-      const value = getValueFromPointer(event.clientX);
+      const value = getValueFromPointerEvent(event);
       emits('slideMove', value)
     }"
     @slide-end="() => {
       rectRef = undefined;
+      offsetPosition = undefined
       emits('slideEnd')
     }"
     @step-key-down="(event) => {
diff --git a/packages/core/src/Slider/SliderRoot.vue b/packages/core/src/Slider/SliderRoot.vue
@@ -5,6 +5,8 @@ import type { DataOrientation, Direction, FormFieldProps } from '../shared/types
 import { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'
 import { useCollection } from '@/Collection'
 
+type ThumbAlignment = 'contain' | 'overflow'
+
 export interface SliderRootProps extends PrimitiveProps, FormFieldProps {
   /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
   defaultValue?: number[]
@@ -26,8 +28,13 @@ export interface SliderRootProps extends PrimitiveProps, FormFieldProps {
   step?: number
   /** The minimum permitted steps between multiple thumbs. */
   minStepsBetweenThumbs?: number
-  /** When `true`, slider thumb will not include the inbound pixel offset */
-  disableThumbOffset?: true
+  /**
+   * The alignment of the slider thumb.
+   * - `contain`: thumbs will be contained within the bounds of the track.
+   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.
+   * @defaultValue 'contain'
+   */
+  thumbAlignment?: ThumbAlignment
 }
 
 export type SliderRootEmits = {
@@ -52,7 +59,7 @@ export interface SliderRootContext {
   currentModelValue: ComputedRef<number[]>
   valueIndexToChangeRef: Ref<number>
   thumbElements: Ref<HTMLElement[]>
-  disableThumbOffset: Ref<boolean>
+  thumbAlignment: Ref<ThumbAlignment>
 }
 
 export const [injectSliderRootContext, provideSliderRootContext]
@@ -80,6 +87,7 @@ const props = withDefaults(defineProps<SliderRootProps>(), {
   minStepsBetweenThumbs: 0,
   defaultValue: () => [0],
   inverted: false,
+  thumbAlignment: 'contain',
 })
 const emits = defineEmits<SliderRootEmits>()
 
@@ -90,7 +98,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { min, max, step, minStepsBetweenThumbs, orientation, disabled, disableThumbOffset, dir: propDir } = toRefs(props)
+const { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
 const { forwardRef, currentElement } = useForwardExpose()
 const isFormControl = useFormControl(currentElement)
@@ -154,7 +162,7 @@ provideSliderRootContext({
   min,
   max,
   disabled,
-  disableThumbOffset,
+  thumbAlignment,
 })
 </script>
 
diff --git a/packages/core/src/Slider/SliderThumbImpl.vue b/packages/core/src/Slider/SliderThumbImpl.vue
@@ -33,7 +33,7 @@ const label = computed(() => getLabel(props.index, rootContext.modelValue?.value
 const size = useSize(thumbElement)
 const orientationSize = computed(() => size[orientation!.size].value)
 const thumbInBoundsOffset = computed(() => {
-  if (rootContext.disableThumbOffset.value || !orientationSize.value) {
+  if (rootContext.thumbAlignment.value === 'overflow' || !orientationSize.value) {
     return 0
   }
   else {
diff --git a/packages/core/src/Slider/SliderVertical.vue b/packages/core/src/Slider/SliderVertical.vue
@@ -4,25 +4,43 @@ import { computed, ref, toRefs } from 'vue'
 import type { SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'
 import { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'
 import { useForwardExpose } from '@/shared'
+import { injectSliderRootContext } from './SliderRoot.vue'
 
 interface SliderVerticalProps extends SliderOrientationPrivateProps {}
 const props = defineProps<SliderVerticalProps>()
 const emits = defineEmits<SliderOrientationPrivateEmits>()
 const { max, min, inverted } = toRefs(props)
 
+const rootContext = injectSliderRootContext()
 const { forwardRef, currentElement: sliderElement } = useForwardExpose()
 
+const offsetPosition = ref<number>()
 const rectRef = ref<ClientRect>()
 const isSlidingFromBottom = computed(() => !inverted.value)
 
-function getValueFromPointer(pointerPosition: number) {
+function getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {
   const rect = rectRef.value || sliderElement.value!.getBoundingClientRect()
-  const input: [number, number] = [0, rect.height]
+
+  // Get the currently active thumb element
+  const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value]
+  const thumbHeight = rootContext.thumbAlignment.value === 'contain' ? thumb.clientHeight : 0
+
+  // Calculate offset for dragging, but only when needed
+  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {
+    offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top
+  }
+
+  // Define the input range (slider track width minus thumb width)
+  const input: [number, number] = [0, rect.height - thumbHeight]
   const output: [number, number] = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value]
   const value = linearScale(input, output)
 
+  const position = slideStart
+    ? event.clientY - rect.top - thumbHeight / 2
+    : event.clientY - rect.top - (offsetPosition.value ?? 0)
+
   rectRef.value = rect
-  return value(pointerPosition - rect.top)
+  return value(position)
 }
 
 provideSliderOrientationContext({
@@ -38,18 +56,20 @@ provideSliderOrientationContext({
     :ref="forwardRef"
     data-orientation="vertical"
     :style="{
-      ['--reka-slider-thumb-transform' as any]: 'translateY(50%)',
+      ['--reka-slider-thumb-transform' as any]:
+        !isSlidingFromBottom && rootContext.thumbAlignment.value === 'overflow' ? 'translateY(-50%)' : 'translateY(50%)',
     }"
     @slide-start="(event) => {
-      const value = getValueFromPointer(event.clientY);
+      const value = getValueFromPointerEvent(event, true);
       emits('slideStart', value)
     }"
     @slide-move="(event) => {
-      const value = getValueFromPointer(event.clientY);
+      const value = getValueFromPointerEvent(event);
       emits('slideMove', value)
     }"
     @slide-end="() => {
       rectRef = undefined;
+      offsetPosition = undefined
       emits('slideEnd')
     }"
     @step-key-down="(event) => {
diff --git a/packages/core/src/Slider/story/SliderChromatic.story.vue b/packages/core/src/Slider/story/SliderChromatic.story.vue
@@ -160,5 +160,69 @@ const controlledRtlMulti = ref([10, 30])
         />
       </SliderRoot>
     </Variant>
+
+    <Variant title="Overflow">
+      <SliderRoot
+        :default-value="[50]"
+        thumb-alignment="overflow"
+        class="relative flex items-center select-none touch-none w-[200px] h-5"
+      >
+        <SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
+          <SliderRange class="absolute bg-white rounded-full h-full" />
+        </SliderTrack>
+        <SliderThumb
+          class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
+        />
+      </SliderRoot>
+    </Variant>
+
+    <Variant title="Overflow (RTL)">
+      <SliderRoot
+        :default-value="[50]"
+        thumb-alignment="overflow"
+        dir="rtl"
+        class="relative flex items-center select-none touch-none w-[200px] h-5"
+      >
+        <SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
+          <SliderRange class="absolute bg-white rounded-full h-full" />
+        </SliderTrack>
+        <SliderThumb
+          class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
+        />
+      </SliderRoot>
+    </Variant>
+
+    <Variant title="Vertical Overflow">
+      <SliderRoot
+        class="relative flex justify-center items-center select-none touch-none w-5 h-[100px]"
+        :default-value="[50]"
+        thumb-alignment="overflow"
+        orientation="vertical"
+      >
+        <SliderTrack class="bg-blackA10 relative rounded-full w-[3px] h-full">
+          <SliderRange class="absolute bg-white rounded-full w-full" />
+        </SliderTrack>
+        <SliderThumb
+          class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
+        />
+      </SliderRoot>
+    </Variant>
+
+    <Variant title="Vertical Overflow (Inverted)">
+      <SliderRoot
+        class="relative flex justify-center items-center select-none touch-none w-5 h-[100px]"
+        :default-value="[50]"
+        thumb-alignment="overflow"
+        orientation="vertical"
+        :inverted="true"
+      >
+        <SliderTrack class="bg-blackA10 relative rounded-full w-[3px] h-full">
+          <SliderRange class="absolute bg-white rounded-full w-full" />
+        </SliderTrack>
+        <SliderThumb
+          class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
+        />
+      </SliderRoot>
+    </Variant>
   </Story>
 </template>

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ const label = computed(() => getLabel(props.index, rootContext.modelValue?.value`
`33`	`33`	`const size = useSize(thumbElement)`
`34`	`34`	`const orientationSize = computed(() => size[orientation!.size].value)`
`35`	`35`	`const thumbInBoundsOffset = computed(() => {`
`36`		`- if (rootContext.disableThumbOffset.value \|\| !orientationSize.value) {`
	`36`	`+ if (rootContext.thumbAlignment.value === 'overflow' \|\| !orientationSize.value) {`
`37`	`37`	`return 0`
`38`	`38`	`}`
`39`	`39`	`else {`