For most mobiles, sliders around the web are sluggish:

Typical slider (similar to jQuery mobile’s sliders)

But they don’t have to be!

Enhanced slider using CSS Transforms

If you can’t modify the slider javascript..

Semi-enhanced slider (using CSS Transforms)

If you are on a desktop, or even a new smartphone (iPhone 5 or similar), you probably can’t see any difference between the sliders. But the majority of mobile users have less powerful devices than you do! Also keep in mind that this is basically a blank page with minimal code bound to the sliding event. The heavier the page, the greater the improvement when using the CSS Transforms. This is why I think this technique should be used for all sliders.

So what’s the difference between the sliders? One line of code.

The first slider uses good old absolute positioning for moving the slider handle around:

	  
  $("#slider-1").on("slide",function(e){
      /*calculate position...*/
      var newPos = 100; /*let's say..*/
      /*apply position.*/
      $(this).css("left", newPos);
  });

The second slider does exactly the same thing, but uses CSS Transforms for the positioning.

	  
  $("#slider-2").on("slide",function(e){
      /*..same as before..*/
      /*apply position using CSS Transforms!*/
      $(this).css("transform", "translate3d("+newPos+", 0, 0)");
      /*(remember vendor prefixes!)*/
  });

If you are using any kind of library like jQuery or jQuery mobile, you might find yourself unable to modify the slider javascript. Rather than doing that, you can semi-enhance the slider just using CSS.
The third slider only applies one initial CSS Transform to the slider handle to force hardware accelerations (despite still using absolute positioning in the slider javascript):

	  
  #slider-3 .demo-slider-handle {
      transform:translate3d(0, 0, 0);
      /*remember vendor prefixes!*/
  }

When building HTML5 apps and websites to compete with native apps for mobile users, one thing stands out as lacking on the web: performance. Part of it is slow page load and rendering times, but it also comes down to non responsive UI elements and transitions. You just can’t create a slick experience when your sliders (,page scrolling, slideshows, pickers widgets etc.) perform badly. Fortunately we have these tricks we can use to improve the performance!

I get really disappointed when I see that even the big players, like jQuery UI and even jQuery Mobile still don’t get this right. In fact, I searched high and low until I could find even one library that do use CSS Transforms for their sliders: Sencha Touch. Good on you guys.

For everyone else — it’s time to pick up the slack. Let’s fix our sliders for our mobile users.

← Blog Home