有没有办法使用 jQuery Bootstrap 滑块突出显示背景？

Question

我正在尝试使用 bootstrap-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（我们称其为 class 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;
}

有没有办法使用 jQuery Bootstrap 滑块突出显示背景？

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

javascript

css

jquery

bootstrap-slider