jQuery 3 Part Slider

Hey Guys,
I wanna recreate this Slider[URL=”http://jkweb.ch/de/angebot”]http://jkweb.ch/de/angebot[/URL]
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

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.

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.

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

Also in #JavaScript _↴