jQuery 3 part slider

[Ketab Luki]

Hey Guys,
I wanna recreate this Sliderhttp://jkweb.ch/de/angebot
I even got the 3 steps from the administration but I wasn't able to recreate it.
This was the message from the admin:"

There are 3 parts

1. Slider: we used the jQuery Plugin http://refreshless.com/nouislider/. the Markup on the html site is
<div class="slider"></div>

the JS Code is

$('.slider').noUiSlider({
start: [ 1500 ],
step: 50,
range: {
'min': min,
'max': max
}
});

with css you can style it as you want to. our styles are in screen.css at line 1684.

2. the animation at the beginning. we switch the slider "manually" with javascript using a CSS3 Transition. the code is pretty long and brushe but as well as trivial:

setTimeout(function() {
// move slider at the beginning
origLeft = $(".slider .noUi-origin").addClass("anim").addClass("bla");
//$(".slider .noUi-origin").attr("style","");
//$(".slider .noUi-origin").animate({"margin-left":180},800);
setTimeout(function() {
//$(".slider .noUi-origin").animate({"margin-left":-180},800);
$(".slider .noUi-origin").removeClass("bla").addClass("blabla");
setTimeout(function() {
$(".slider .noUi-origin").removeClass("blabla");
//$(".slider .noUi-origin").animate({"margin-left":0},800);

$("#price-adjust").countTo({
from: 800,
to: 1500,
speed: 700,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
$(".slider .noUi-origin").removeClass("anim");
//$(".slider .noUi-origin").css("margin-left",100);
}
});
}, 800);
$("#price-adjust").countTo({
from: 1900,
to: 800,
speed: 700,
refreshInterval: 50,
onComplete: function(value) {

}
});
}, 800);


$("#price-adjust").countTo({
from: 1500,
to: 1900,
speed: 700,
refreshInterval: 50,
onComplete: function(value) {

}
});


}, 1400);

we have 3 complex functions, which are used with setTimeout(fnc, timeout) and are each time shifted: the shift to the left (class .bla) to the right (class .blabla) responsible for, these both classes have a simple margin-left property, which is animated, details are also in screen.css at line 1534ff. the animation of the number is with the jquery code


(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});

// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;

return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);

function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));

if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}

if (loopCount >= loops) {
clearInterval(interval);
value = options.to;

if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};

$.fn.countTo.defaults = {
from: 0,
// the number the element should start at
to: 100,
// the number the element should end at
speed: 1000,
// how long it should take to count between the target numbers
refreshInterval: 100,
// how often the element should be updated
decimals: 0,
// the number of decimal places to show
onUpdate: null,
// callback method for every time the element is updated,
onComplete: null,
// callback method for when the element finishes updating
};
})(jQuery);

umgesetzt.

3. the adjustment of the picture while using the slider. for this effect we are using 2 pictures which are with position: absolute on above the other one. Both pictures show the same picture, one of them is edited with photoshop to look old. if you swith the slider the picture above gets increasingly invisible, using a according opacity Styling. the JS code is

var makeGray = function() {
pr = parseInt($(".slider").val());
gr = Math.round((1 - (pr - min) / (max - min)) * 100);
gr_1 = 1 - gr / 100;
//gr_1 = (1-gr_1)/2+0.5
//$(".angebot-header .img").css(prefix.css + 'filter','grayscale('+gr+'%)');
$(".angebot-header .img").css('opacity', gr_1);
//$(".angebot-header .img").css(prefix.css + 'filter','blur('+gr+'px)');
};

So if somenone could help me to put the pieces together and make it work, I would even pay if you want. I tried about 5 houres and it didn't work. I'm really desperatley.
Thank you