Animate Slider with CSS3

[Redsign]

This CSS uses CSS3 transitions to animate the slider on the order form. It'll work in recent browsers, and fallback in older ones.

 

Demo: https://redsign.co.uk/cart.php

 

Add the following to the end of /templates/orderforms/slider/style.css :

.ui-slider .ui-slider-range, .ui-slider .ui-slider-handle {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.sliderlabel {
	-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
-ms-transition: color 0.5s ease-in-out;
transition: color 0.5s ease-in-out;   
}

 

You'll need to use the 'Slider' order form, set that in WHMCS Settings > Ordering.

[cpservr]

Nice,, i try it in my whmcs dev, and worked perfectly! thanks for your tip!

[FrostByte]

Very nice mod!

[nobody]

The delay is too long. it feels almost broken or like the script is halting. instead of .5 try .3

[Dual Hosts]

Thanks for sharing it with us, pretty cool.

[Redsign]

Just to let you know this still works with v5.1.2.