Slider Thumb primitives not working in Preact

[nikuda]

Bug report

Current Behavior

Thumb components are not shown, and not receiving any updates pass the initial inline style applied:

element.style {
    transform: var(--radix-slider-thumb-transform);
    position: absolute;
    left: calc(0% + 0px);
}

If the nested span's css is modified from display: none to display: block the element is rendered on left edge and still doesn't move despite the white line being draggable on both ends.

Expected behavior

For slider thumbs to be attached to end of white line and to move along with them.

Reproducible example

https://stackblitz.com/edit/nextjs-preact-webpack5-pjoxwh

Additional context

With Preact v10.10.1 release Slider component no longer hangs the whole app, and for most past it works except for the Thumb components as described above.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-slider	1.0.0
React	n/a	n/a
Preact	n/a	10.10.1
Browser	Chrome	91.0
Assistive tech
Node	n/a	16.14.2
npm/yarn	yarn	1.22.10
Operating System	MacOs / Linux

[andy-hook]

Hi @nikuda, thanks for raising. Honestly I feel like this would be best solved at the Preact level and would encourage you to raise an issue there. While I understand and appreciate the goals of that project, Radix uses a wide array of React features and we can't guarantee functional behaviour if this implementation differs under the hood.

For that reason I'm going to close this for now, feel free to follow up with more information though if you learn more as relates to Preact specifically 🙏

[nikuda]

Not a problem @andy-hook. Raised the issue in preact repo preactjs/preact#3666.

There's a fair bit of cross-over between Preact and Radix UI: lightweight, focused libraries. Would you be open to having some kind of compatibility suite once the issues are ironed out?

[andy-hook]

Thanks @nikuda

Would you be open to having some kind of compatibility suite once the issues are ironed out

Honestly unlikely, creating style agnostic, a11y enhanced primitives just for the React target is challenging enough at the best of times. If React decides to move away from a synthetic event system in the future then parity may increase and make this easier though.