Slider To FIlter On A List
http://stackoverflow.com/q/8562222/918414
by bizamajig
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div id="slider"></div>
<ul>
<li class="prod" data-channels="3 4 6 8">product 1</li>
<li class="prod" data-channels="1">product 2</li>
<li class="prod" data-channels="2 8">product 3</li>
<li class="prod" data-channels="3 8">product 4</li>
<li class="prod" data-channels="3">product 5</li>
<li class="prod" data-channels="6">product 6</li>
</ul>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23915674-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
var headerUri = 'http://stackoverflow.com/q/8562222/918414',
headerCaption = 'jQuery :contains selector does not work with jQueryUI slider';
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255,...JavaScript
$("#slider").slider( {
value: 0,
min: 0,
max: 24,
step: 1,
slide: function(event, ui) {
$("#amount").val( ui.value );
var filter = ui.value;
if (filter) {
$('li.prod').each(function(index) {
var channels = $(this).data('channels');
if (channels.toString().split( ' ' ).indexOf( filter.toString() ) > -1 ) {
$(this).fadeTo("fast", 1);
} else {
$(this).fadeTo("fast", 0.3);
}
});
}
}
});
$("#amount").val($("#slider").slider("value"));