8 Bootstrap Component - Slider
git: https://github.com/juanmendez/bootstrap-slider
created by Juan Mendez
HTML
<link rel="stylesheet" href="http://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="http://seiyria.github.io/bootstrap-slider/stylesheets/slider.css">
<script src="http://seiyria.github.io/bootstrap-slider/javascripts/modernizr.js"></script>
<script src="http://seiyria.github.io/bootstrap-slider/javascripts/jquery.min.js"></script>
<script src="http://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>
<body>
Filter by price interval: <b>€ 10</b> <input id="ex2" type="text" class="span2" value="vem" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>
<br />
<label>Left:</label><p id="left"></p>
<label>Right:</label><p id="right"></p>
</body>
JavaScript
$(document).ready(function(){
$("#ex2").slider({});
$('#ex2').slider()
.on('slideStop', function(ev){
var adjustValue1 = 15;
var adjustValue2 = 0;
if(ev.value[0] == ev.value[1]){
if($('#ex2').data('slider-min') + adjustValue1 > ev.value[0]){
adjustValue1 = 0;
adjustValue2 = 15;
}
$('#ex2').slider('setValue',[ev.value[0]-adjustValue1,ev.value[1]+adjustValue2]); // if equal change value
}
});
$('#ex2').slider()
.on('slide', function(ev){
$('#left').text(ev.value[0]);
$('#right').text(ev.value[1]);
});
});