这是过滤器栏的Html代码。
<div class="filter-price p-t-22 p-b-50 bo3">
<div class="m-text15 p-b-17">
Price
</div>
<div class="wra-filter-bar">
<div id="filter-bar" id="value">
</div>
</div>
<div class="flex-sb-m flex-w p-t-16">
<div class="w-size11">
<!-- Button -->
<button class="flex-c-m size4 bg7 bo-rad-15 hov1 s-text14 trans-0-4" class='filter'>
Filter
</button>
</div>
<div class="s-text3 p-t-10 p-b-10">
Range: $
<span id="value-lower">610
</span> - $
<span id="value-upper">980
</span>
</div>
</div>
</div>
这是这个的JQuery代码
Filter Bar
<script type="text/javascript">
/*[ No ui ]
===========================================================*/
var filterBar = document.getElementById('filter-bar');
noUiSlider.create(filterBar, {
start: [ 100, 2000 ],
connect: true,
range: {
'min': 100,
'max': 2000
}
}
);
var skipValues = [
document.getElementById('value-lower'),
document.getElementById('value-upper')
];
filterBar.noUiSlider.on('update', function( values, handle ) {
skipValues[handle].innerHTML = Math.round(values[handle]) ;
}
);
</script>