feat(Slider): add new prop to exclude thumb inbound offset (#1707)

zernonia · web-flow · commit da7372ef38af · 2025-03-14T21:12:57.000+08:00
diff --git a/packages/core/src/Slider/SliderRoot.vue b/packages/core/src/Slider/SliderRoot.vue
@@ -26,6 +26,8 @@ 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
 }
 
 export type SliderRootEmits = {
@@ -50,6 +52,7 @@ export interface SliderRootContext {
   currentModelValue: ComputedRef<number[]>
   valueIndexToChangeRef: Ref<number>
   thumbElements: Ref<HTMLElement[]>
+  disableThumbOffset: Ref<boolean>
 }
 
 export const [injectSliderRootContext, provideSliderRootContext]
@@ -87,7 +90,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { min, max, step, minStepsBetweenThumbs, orientation, disabled, dir: propDir } = toRefs(props)
+const { min, max, step, minStepsBetweenThumbs, orientation, disabled, disableThumbOffset, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
 const { forwardRef, currentElement } = useForwardExpose()
 const isFormControl = useFormControl(currentElement)
@@ -151,6 +154,7 @@ provideSliderRootContext({
   min,
   max,
   disabled,
+  disableThumbOffset,
 })
 </script>
 
diff --git a/packages/core/src/Slider/SliderThumbImpl.vue b/packages/core/src/Slider/SliderThumbImpl.vue
@@ -32,9 +32,14 @@ const percent = computed(() => value.value === undefined ? 0 : convertValueToPer
 const label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0))
 const size = useSize(thumbElement)
 const orientationSize = computed(() => size[orientation!.size].value)
-const thumbInBoundsOffset = computed(() => orientationSize.value
-  ? getThumbInBoundsOffset(orientationSize.value, percent.value, orientation!.direction)
-  : 0)
+const thumbInBoundsOffset = computed(() => {
+  if (rootContext.disableThumbOffset.value || !orientationSize.value) {
+    return 0
+  }
+  else {
+    return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation!.direction)
+  }
+})
 
 const isMounted = useMounted()
 onMounted(() => {
