Bootstrap Range Input

Simply styles html5 range inputs in a bootstrap like manner with pure css.


Not bad!

Getting Started

Include the dependencies: Bootstrap and bootstrap-range-input CSS.

<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-range-input/dist/css/bootstrap-range-input.min.css" rel="stylesheet">

Now simply add the form-control class to your range inputs.

<input type="range" class="form-control" />

Note

To display the glyphicons on the slider thumbs they are being translated into inline svg graphics that will then be used as background-images. These Glyphicon Halflings are normally not available for free and where made available for Bootstrap free of cost. Therefore before using them on your sliders I personally suggest to purchase the pro version here even though the author told me that this was ok from his point of view.