Bootstrap Range Input
Simply styles html5 range inputs in a bootstrap like manner with pure css.
Not bad!
Simply styles html5 range inputs in a bootstrap like manner with pure css.
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" />
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.