Comments on: Colorful Sliders With jQuery & CSS3

By: Devin

Devin — Mon, 02 Aug 2010 22:07:21 +0000

I can see this being very useful for my client’s who utilize graphs a lot. They can simply change the slider position.

By: Alex

Alex — Wed, 21 Jul 2010 14:32:41 +0000

Hi there,
I love this tutorial! The effect is exactly what I am going for on a script I am working on, however I need to make a custom .drop function. Would this be the same syntax as the drag:function() ?
What I am trying to do is when the user drops the slider, they are restricted from dragging for a certain period of time and then a content pane appears, populated by ajax content.

By: Martin Angelov

Martin Angelov — Thu, 15 Apr 2010 06:43:51 +0000

@ Jacob You could do this with cookies. I will not go into details, but you should probably listen to the stop event in sliders.js between lines 8-9. This event is called when dragging stops. You can then set a cookie for the slider with its current height. You will end up with three cookies for each of the sliders. After this, you should think of a way to read these cookies on page load, and if they exist, update each of the sliders' css top positions (as well as the bars' heights). You can read more about setting and reading cookies with jQuery in this MicroTut.

By: Jacob

Jacob — Wed, 14 Apr 2010 12:33:53 +0000

Martin, I’m curious is there anyway to have the sliders hold their position on browser refresh/relaunch?

By: Zabava

Zabava — Fri, 02 Apr 2010 17:28:14 +0000

Nice post thank you for sharing! :-)

By: Gaurav Mishra

Gaurav Mishra — Wed, 31 Mar 2010 16:03:33 +0000

I m lovin it

By: Bloggerzbible

Bloggerzbible — Sun, 21 Mar 2010 07:07:57 +0000

Ultimate work

By: Martin Angelov

Martin Angelov — Sat, 20 Mar 2010 08:08:54 +0000

@Mr.MoOx

To demonstrate how different transformations are stacked. But transform-origin is a valid option. If anyone wants to implement it, they have to put the following lines somewhere before the -moz-transform rules in the .perspective class in styles.css:

-moz-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;

This will eliminate the need for translate(47px) in the transform statements.

By: adhi cahya

adhi cahya — Sat, 20 Mar 2010 05:13:08 +0000

that great…..!!! thanks

By: Mr.MoOx

Mr.MoOx — Fri, 19 Mar 2010 11:27:03 +0000

Why not use transform-origin instead of use a translation for the skew ?