demo vs. code base discrepancy

[canfie1d]

Your demo uses translate() to position the handles and seems to work correctly while your codebase uses left and doesn't seems to be positioning the handles in the correct place. Which is newer code? Translate is more performant in animations so I assume that the demo is an upgraded version. Can that code be made available?

[qwtel]

Difficult to explain. So originally I was using transform for positioning, but it caused some problems with existing transforms on the handles. That's probably the component you are seeing. After that I switched to absolute positioning, but still pixel based. For the rewrite of the component I'm sticking with absolute positioning, despite the performance implications because

• it allows to position the handles without knowing the size of the slider, which solves all the visibility related problems
• the bars between the handles have to be positioned absolute anyway (I think in theory it would be possible to do it with scale(), but that won't do well with bars that have a background image)

[canfie1d]

Oh ok, so the demo is using old code? Why are you using px based values instead of percentage based?

[qwtel]

Yes. The reason is that percentage based positioning via transform is relative to the size of the element being transformed (i.e. setting transform: translateX(50%) on a handle will offset it by 50% of its width, which is not what we want)

[gabssnake]

@qwtel any chances of unifying the two packages or updating this one to accept React 0.14 ?

[kodama78]

Hi, I noticed the same discrepancy and have a question. The code base is not positioning the handles correctly and for some reason seems to ignore the position: relative from the slider. My question is how do I fix this issue?