include support for CSS3 tranform

[paolotozzo]

Added support for css3 transform (2d and 3d) that can be disabled if preferred, but as default is true, as it is far better for performances.

[BrandonLive]

Not really sure if this is actually better for performance. Yes, transforms are much faster than position changes that affect layout, but since the thumb is absolutely positioned, changing top/left shouldn't cause any layout work.

Of course, this would require some testing on a variety of browsers to confirm.

[paolotozzo]

According to Paul Irish' blog transforms are taking advantage for hardware acceleration, so the animation would be smoother http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/. Of course, some more measuring that, especially with the more recent browsers, wouldn't hurt

[BrandonLive]

Animations (and transitions) should generally be done via transforms and not top+left. Hardware acceleration is one reason, though more often it's just the fact that the animation or transition can run off the UI thread in the compositor.

You aren't using animations though, and are handling input and making the update on the UI thread either way. It's basically two ways of making the browser do the same work. The only benefit might be an impact to layering in some browsers, but there are tricks for forcing that with one line of CSS ("transform:none" works in some browsers, or "backface-visibility: hidden", or others - until the will-change property becomes commonly supported).

[BrandonLive]

Probably a better improvement to make here is to make _drag just record the new position where the thumb should be, and have a requestAnimationFrame loop do the updates.

[paolotozzo]

Found also this article http://blog.tumult.com/2013/02/28/transform-translate-vs-top-left/, confirming that, for newer browsers the performance impact is probably meaningless.

[wieringen]

Fixed in pull request of BrandonLive