[preact/compat] radix-ui Slider component drag points (Thumbs) not working #3666

Activity

1. JoviDeCroock commented on Aug 12, 2022

   

   JoviDeCroock

   on Aug 12, 2022

   Member

   More actions

   So far I have been able to narrow it down to this useCollection, this getItems is not returning the thumbs
2. marvinhagemeister commented on Aug 14, 2022

   

   marvinhagemeister

   on Aug 14, 2022

   Member

   More actions

   Took a stab at this too. From what I can tell so far is that this is caused by a combination of re-renders and abusing refs as state updaters. So what the radix-ui team is doing akin to this:

   function Foo() {
     const [thumb, setThumb = useState(null);
     // Ref is abused as a state setter.
     return <button ref={(el) => setThumb(el)} />
   }

   In the real code base there are a few abstractions in-between like the composedRefs thing, but that's essentially the pattern they are doing. But why does that lead to a different rendering result in Preact vs React?

   That can be answered by looking into how both frameworks deal with state updates during a commit is being batched. In Preact we just re-queue the component and once the queue is components is flushed (meaning all components finished rendering), then we fire all pending effects that that were scheduled via useEffect.

   Problem is that during the rendering of the re-queued component which holds the thumb state, the state holds now the DOM reference. But that reference is the only thing guarding the invocation of getItems, which is ultimately responsible for setting the thumb index, which ends up controlling what kind of value (=slider position) the thumb has. But because the index is -1 the value is undefined and when the value is undefined the thumb controller adds a display: none to the thumb.

   The whole logic relies on this useEffect being called, by which point getItems returns a valid index and the thumb is shown.

   In React this works, because the effects seem to be executed before a re-queued element is rendered, instead of at the end when all components have been rendered.

   👍React with 👍1Reacted by Yumin Chen

   ❤️React with ❤️1Reacted by Yumin Chen

   👀React with 👀1Reacted by Yumin Chen
3. JoviDeCroock

   added

   compat

   on Jul 11, 2023
4. nikogoli

   added a commit that references this issue on Nov 2, 2023

   Change：Slider を 一部 利用可能に

   ...

   98290a8
5. arpu commented on Jun 5, 2025

   

   arpu

   on Jun 5, 2025

   More actions

   is there any workaround we can do?

   👀React with 👀1Reacted by Jonas Holcner
6. TJGinis commented on Feb 10, 2026

   

   TJGinis

   on Feb 10, 2026

   More actions

   This still seems to be an ongoing issue with the radix slider when using preact.
   As you can see in the attached image the user has dragged the left thumb to $15 and the right thumb to $55. However, the left thumb hasnt moved and the right thumb was not even visible to begin with.