Is there a way to highlight a background using jQuery Bootstrap Slider?

Question

I'm trying to highlight the background of the slider using the low track (left background of slider) and right track (right side of slider) using bootstrap-slider.

I would like my slider to only reveal a yellow background when the slider moves to the left or right. Similar to how this slider example reveals a black background: https://jsfiddle.net/leongersen/9hyfv0bw/11/

So far the code below is what I have:

https://jsfiddle.net/jimmyt1001/96zj2wnf/9/

  #slider12a .slider-track-high, #slider12c .slider-track-high {
      background: green;
    }


    #slider12c .slider-selection {
      background: yellow;
    }

<input id="ex12c" type="text"/><br/>

$("#ex12c").slider({ 
 id: "slider12c", 
 min: 0, 
 max: 40, 
 range: false,
 value: 20 });

Answer 1

Let's do more or less like the example you posted.

You can create a div (let's call its class middleTrack) with two elements (.left and .right) absolutely positioned inside it that will have the yellow background.

Then, position them and create a function called using the method .on(slide, middleTrackFunction) that will apply a calculated width relative to the tracker situation. Run it once to apply from the beginning. Also, hide .slider-selection element somehow to prevent it from invading the new trackers.

jQuery:

$("#ex12c").slider({
    id: "slider12c",
    min: 0,
    max: 40,
    range: false,
    alue: 20
}).on('slide', middleTrackFunction);

$(".slider-track").prepend("<div class='middleTrack'><div class='left'></div><div class='right'></div>");

function middleTrackFunction() { // call whenever slide happens
    var halfWidth = $('.middleTrack').width() / 2;
    var leftWidth = $('.slider-selection').width();
    var rightWidth = $('.slider-track-high').width();
    $('.middleTrack .right').width(leftWidth - halfWidth);
    $('.middleTrack .left').width(rightWidth - halfWidth);
}

middleTrackFunction(); // run at least once

CSS:

#slider12a .slider-track-high, #slider12c .slider-track-high {
    background: transparent;
}
.middleTrack div {
    position: absolute;
    height: 100%;
    top: 0;
    background: yellow;
}
.middleTrack .left {
    right: 50%;
}
.middleTrack .right {
    left: 50%;
}
.slider-selection {
    z-index: -1;
}