<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" />
<h3 class="col-md-12 heading3" >Jquery slider range : View table rows as per price range filter</h3>
<div class="col-md-3 well">
<p>
<label for="amount">Price Range</label>
<input type="text" disabled id="amountRange" class="form-control font-weight-bold" />
</p>
<div id="slider-range2"></div>
<!--<br><div>Another Layout below: </div>
<div id="slider-range"></div>-->
</div>
<div class="col-md-8 text-left well">
<table class="table table-bordered table-hover" id="theTable">
<thead>
<tr class="info">
<th>First Column [ Price ]</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
<td>test</td>
<td>test2</td>
</tr>
<tr>
<td>51</td>
<td>test</td>
<td>test2</td>
</tr>
<tr>
<td>77</td>
<td>test</td>
<td>test2</td>
</tr>
<tr>
<td>215</td>
<td>test</td>
<td>test2</td>
</tr>
<tr>
<td>105</td>
<td>test</td>
<td>test2</td>
</tr>
<tr>
<td>250</td>
<td>test</td>
<td>test2</td>
</tr>
<tr>
<td>125</td>
<td>test</td>
<td>test2</td>
</tr>
<tr>
<td>450</td>
<td>test</td>
<td>test2</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://unbug.ru/examples/jquery/slider/fixslider.js"></script>
<script>
$( "#slider-range, #slider-range2" ).slider({
range: true,
min: 0,
max: 500,
values: [ 20, 450 ],
tooltip: true,
tooltipDisplay: true,
position: {
left: [-40,10],
top: [15,15]
},
tooltipClass: 'slider-custom',
slide: function( event, ui ) {
// in this function we can define what happens when a user changes the sliders
$( "#amountRange" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$( "#slider-range a.ui-slider-handle:nth-child(2)" ).html('<span>' + ui.values[ 0 ] + '</span>' );
$( "#slider-range a.ui-slider-handle:nth-child(3)" ).html('<span>' + ui.values[ 1 ] + '</span>' );
$( "#slider-range2 a.ui-slider-handle:nth-child(2)" ).attr('data-toggle','tooltip').attr('title', ui.values[ 0 ]);
$( "#slider-range2 a.ui-slider-handle:nth-child(3)" ).attr('data-toggle','tooltip').attr('title', ui.values[ 1 ]);
$( "#slider-range2 a.ui-slider-handle:nth-child(2)" ).html('<span>' + ui.values[ 0 ] + '</span>' );
$( "#slider-range2 a.ui-slider-handle:nth-child(3)" ).html('<span>' + ui.values[ 1 ] + '</span>' );
var table = document.getElementById("theTable");
for (var i = 1, row; row = table.rows[i]; i++) {
//iterate through rows (we SKIP the first row: counter starts at 1!)
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns: if first column not in range: HIDE, else SHOW
if (j == 0) {// if first column
if ($(col).html() >= ui.values[ 0 ] && $(col).html() <= ui.values[ 1 ]) {
// if in interval
$(row).show();
} else {
$(row).hide();
}
}
}
} setTimeout(function() {
$( "#slider-range2 a.ui-slider-handle span").fadeOut('slow');
}, 4000);
}
});
$( "#amountRange" ).val($( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
</script>
/*http://unbug.ru/content/jquery-ui-range-slider-tooltip-vsplyvayushchaya-podskazka-dlya-slaydera*/
.heading3{font-weight:bold; margin-bottom:18px; padding:0;}
#amountRange{
border:1px solid #afafaf;
color:green;
box-shadow:0 0 0;
width:150px;
display:none;
background:#fff;
text-align:center;
font-size:16px;
font-weight:bold;
}
#slider-range a.ui-slider-handle{}
#slider-range a.ui-slider-handle span,
#slider-range2 a.ui-slider-handle span{
position:absolute;
background-color:rgba(0,0,0,0.8);
margin-left:-8px;
bottom:-28px;
border-radius:3px;
padding:2px 5px;
color:#fff;
font-size:14px;
}
/* Here is the CSS to make the slider look pretty:*/
#slider-range, #slider-range2 {
width:300px;
margin-top:10px;
}
table{background:#fff;}
body {
margin: 15px;
}
#slider-range2.ui-slider-horizontal {
border: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-range, #slider-range2.ui-slider-horizontal .ui-slider-handle {
background: url("http://unbug.ru/examples/jquery/slider/slide.png") repeat scroll 0 0 transparent;
}
#slider-range2.ui-slider-horizontal .ui-slider-range {
background-position: 0 -42px;
background-repeat: repeat-x;
height: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle {
background-position: 0 0;
background-repeat: no-repeat;
border: 0 ;
height: 21px;
top: 0;
width: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle:focus {
outline: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle + .ui-slider-handle {
background-position: -21px 0;
}
