primitives
primitives copied to clipboard
add ignoreThumbOffset option
Feature request
I'm trying to implement the following design using the Slider component
Overview
Using the following code
<SliderPrimitive.Root
[clip]
defaultValue={[value]}
max={steps}
step={1}
>
<SliderPrimitive.Thumb [clip]>
<Bubble className="px-6 py-2 block">move me</Bubble>
</SliderPrimitive.Thumb>
</SliderPrimitive.Root>
Which gives me the following result
https://github.com/radix-ui/primitives/assets/235510/8794f81b-d08c-4b55-b817-b459595d3ff6
The guilty is the thumbInBoundsOffset on https://github.com/radix-ui/primitives/blob/af1e3b41cb5c49d7b8c073d2aec34d5074c6dd17/packages/react/slider/src/Slider.tsx#L586C58-L586C77
By adding the option ignoreThumbOffset on the <Thumb />, we could refactor the code
to be
const thumbInBoundsOffset = orientationSize && !ignoreThumbOffsfet
? getThumbInBoundsOffset(orientationSize, percent, orientation.direction)
: 0;
And it would fix the issue
https://github.com/radix-ui/primitives/assets/235510/6b813774-544a-4bec-81e5-b9c1213c052a