primitives icon indicating copy to clipboard operation
primitives copied to clipboard

add ignoreThumbOffset option

Open bmichotte opened this issue 1 year ago • 0 comments

Feature request

I'm trying to implement the following design using the Slider component CleanShot 2024-06-10 at 15 52 02@2x

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

bmichotte avatar Jun 10 '24 13:06 bmichotte