Open bmichotte opened 3 weeks ago
I'm trying to implement the following design using the Slider component
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
thumbInBoundsOffset
By adding the option ignoreThumbOffset on the <Thumb />, we could refactor the code to be
ignoreThumbOffset
<Thumb />
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
Feature request
I'm trying to implement the following design using the Slider component![CleanShot 2024-06-10 at 15 52 02@2x](https://github.com/radix-ui/primitives/assets/235510/bff24f43-d469-4915-9350-d149c619bbb0)
Overview
Using the following code
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-L586C77By adding the option
ignoreThumbOffset
on the<Thumb />
, we could refactor the code to beAnd it would fix the issue
https://github.com/radix-ui/primitives/assets/235510/6b813774-544a-4bec-81e5-b9c1213c052a