javascript - 有没有办法使用 jQuery Bootstrap Slider 突出显示背景？

Question

我正在尝试使用 bootstrap-slider 使用低轨道( slider 的左侧背景)和右轨道( slider 的右侧)突出显示 slider 的背景。

我希望我的 slider 仅在 slider 向左或向右移动时显示黄色背景。类似于此 slider 示例显示黑色背景的方式: https://jsfiddle.net/leongersen/9hyfv0bw/11/

到目前为止，下面的代码是我所拥有的:

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

让我们或多或少像您发布的示例一样。

您可以创建一个 div(我们称它的类为 middleTrack)，其中有两个绝对定位的元素(.left 和 .right)会有黄色背景。

然后，定位它们并创建一个使用 .on(slide, middleTrackFunction) 方法调用的函数，该函数将应用计算出的与跟踪器情况相关的宽度。运行一次以从头开始应用。此外，以某种方式隐藏 .slider-selection 元素以防止它入侵新的跟踪器。

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;
}