Tutorialzine has writen tutorial “how to create colorful sliders with jQuery & CSS3“. This tutorial using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

Basically it has only two structures, which are duplicated three times, once for every color. It has the slider structure, which is a div with two assigned class names – colorful-slider, and another one of three color choices. The latter one is later used by jQuery to determine which bar the slide movement affects.

Here they use the jQuery UI’s draggable method, which converts any div on your page into a draggable object. They also define the drag function which will be executed on every drag movement. PSD file also available for further cuztomization.

Requirements: jQuery 1.4.2, jQuery UI library
Demo: http://demo.tutorialzine.com/2010/03/colorful-sliders-jquery-css3/demo.html

Incoming search terms for the article:

• jquery slider
• slider jquery
• css3 slider
• colorful sliders
• jquery slide
• jquery slider color
• jquery slider bar
• jquery sliders
• slider bar jquery
• image slider jquery