How to Give Differnet Background Color to Slider

Background color slider

So you set the animation duration for the AnimateCSS library in :root (5 seconds).

Then you load the AnimateCSS library via the CDN.

Finally you need to specify a z-index for each div box that is always higher than the previous box so that it shows "over" the previous color.

Also adjust the animation-delays accordingly to your parameters.

:root {
  --animate-duration: 5000ms;
}

.c {
  position:absolute;width:250px;height:200px;overflow:hidden;
}

.box {
  min-width:250px;width:250px;height:200px;position:absolute;
}

.div1 {
  background:blue;
}
.div2{background:purple;z-index:5;animation-delay:5s;}
.div3{background:green;z-index:10;animation-delay:10s;}

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<div class="c">
  <div class="box div1 animate__animated animate__slideInLeft"></div>
    <div class="box div2 animate__animated animate__slideInLeft"></div>
   <div class="box div3 animate__animated animate__slideInLeft"></div>
<div>

Slick slider change background-color on each slide

You need to get the slide elements and set the background color via jQuery and .css() for example.

The slick object stores it's slides in $slides so you can access them via the index provided through nextSlide.

I've created a working fiddle for you:

var $slideContainter = $('.frontpage-client-slick'),
    $slider = $slideContainter.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        infinite: true,
        speed: 1000,
        autoplay: true,
        autoplaySpeed: 4000,
        fade: true,
        centerMode: true
    }),
    colorSettings = {
        headline: ['red', 'blue', 'yellow','red', 'blue', 'yellow','blue'],
        section: ['blue', 'yellow','red', 'blue', 'yellow','blue', 'red']
    },
    changeColors = function (slide) {
        $slideContainter.siblings('h1').animate({
        color: colorSettings.headline[slide]
    }, 1000 );

    $slideContainter.parentsUntil('.section').animate({
        backgroundColor: colorSettings.section[slide]
    }, 1000 );
    };

// Initial call to set color
changeColors(0);

$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    changeColors(nextSlide);
});

jQuery UI Slider - Change background color ONLY between handlers/sliders/markers

You can add div inside your slider and resize them when you move the handles. With proper css it'll give the effect you're describing. You may need to tweak it a little bit, but this should give you some ideas:

HTML

//You add divs inside your slider, you need four, the last region will be 
/background of slider
<div class="pct-slider" id="mondaySlider">
     <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>  
</div>

CSS

 //Make your divs relative and give them color    
.color-region
    {
        position: relative;
        height: 100%;
        float: left;
    }

.color-region:nth-child(1)
{
    background-color: blue;
}
.color-region:nth-child(1)
{
    background-color: blue;
}
.color-region:nth-child(2)
{
    background-color: red;
}
.color-region:nth-child(3)
{
    background-color: yellow;
}
.color-region:nth-child(4)
{
    background-color: green;
}

function resize_colors() {
       //you start at 0 
       var cur_pos = 0;
        $(".ui-slider-handle").each(function (i) {
            //for each handle you check position and set width of corresponding color div
            $('.color-region').eq(i).css('width', $(this).position().left - cur_pos)
          //update cur_pos to calculate next color width  
          cur_pos = $(this).position().left;
        })
    }

You'll see it doesn't follow completely on slide event, part of this is because slide event is triggered when it moves only, so when you stop, there's a moment not updating. But maybe if you run resize color on some other event it will give a better result.

See fiddle:http://jsfiddle.net/t4veqohy/1/

Change the container background for each slide

Checking the plugin demo with the browser inspector, it looks like when a slide is active, the plugin adds the class active-slide to the slide div.

Also in the documentation shows that in the plugin activation you can configure callbacks to execute on different events (http://jacksbox.de/stuff/jquery-fractionslider/plugin-options-reference/). So put the background color change inside of the corresponding callback. Something like (check all the callbacks, to verify where you want to apply it)...

function setActiveSlideBackground() {
    var activeSlideId = $('div.slide.active-slide').attr('id');
    if (activeSlideId == 'slide1')
        $('div.wrapper').css('background','yellow');
    else if (activeSlideId == 'slide2')
        $('div.wrapper').css('background','red');
}

$('.slider').fractionSlider({
    'nextSlideCallback': function(el,currentSlide,lastSlide,step) {
        setActiveSlideBackground();
    },
    'prevSlideCallback': function(el,currentSlide,lastSlide,step) {
        setActiveSlideBackground();
    }
});

Background not changing correctly with respect to sliders

The problem here was the area which was getting the sat value, I changed:

const satValue = chroma(satColor).hsl()[1];
slider.value = (Math.floor(satValue) * 100) / 100;

For

const satValue = chroma(satColor).get('hsl.s');
slider.value = (satValue);

And it works for me!

How to change slider color according to percentage

You could create an animation that's paused and manually set the animation-delay property.

The animation is 100s. Set the animation-delay to the current value. Add style="animation-delay: -50s" to your input. This would be the default value -50 for 50%, -20 for 20%, etc.

Then add oninput="this.style.animationDelay = -this.value + 's'" to the input. So as the slider moves, it changes the animationDelay to the percentage.

Then in CSS, on .slider, change background to currentColor and add animation: color-range 100s linear forwards paused;.
Finally, add to css:

@keyframes color-range {
    0% { color: steelblue }
    100% { color: green }
}

let setColor = (el) => {
    el.style.animationDelay = `-${el.value}s`;
  el.style.background = `linear-gradient(90deg, currentColor ${el.value}%, rgba(0,0,0,0.1) ${el.value}%)`;
};

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  outline: none;
  animation: color-range 100s linear forwards paused;
  background: linear-gradient(90deg, currentColor 50%, rgba(0,0,0,0.1) 50%);
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: red;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

@keyframes color-range {
  0% { color: steelblue }
  100% { color: green }
}

<div class="row">
    <div class="mb-3 slidecontainer">
        <input class="slider"
          type="range"
          min="0"
          max="100"
          step="5"
          style="animation-delay: -50s"
          oninput="setColor(this)">
    </div>
</div>