radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
14.83k stars 717 forks source link

add ignoreThumbOffset option #2946

Open bmichotte opened 3 weeks ago

bmichotte commented 3 weeks ago

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