Bootstrap Slider

Bootstrap Slider Example

by jimmyt1001

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css">
<input id="ex12c" type="text"/><br/>

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

JavaScript

$("#ex12c").slider({
    id: "slider12c",
    min: 0,
    max: 40,
    range: false,
    value: 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