Slider for Bootstrap

Coloring the low and high track segments.

HTML

<script src="http://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>
<link rel="stylesheet" href="http://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css">
<!-- Single-value slider, high track: -->
<input class="slider" id="a" type="text"/><br/>
Note that there is no low track on the single-value slider. The area to lesser than the value of the handle is the selection.

<!-- Range slider, low track: -->
<input class="slider" id="b" type="text"/><br/>

<!-- Range slider, low and high tracks, and selection: -->
<input class="slider" id="c" type="text"/><br/>

CSS

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

#slider12b .slider-track-low, #slider12c .slider-track-low {
	background: red;
}

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

JavaScript

$(".slider").each(function(e){
    new Slider($(this).attr("id", { id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
});