Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

jQuery UI Range Slider Control Usage

jQuery UI Range Slider Control

Add jPList scripts to the HEAD:

    
<!-- jPList Core -->		
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.core.min.js"></script>	

<!-- jQuery UI Bundle -->			
<link href="jplist.jquery-ui-bundle.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.jquery-ui-bundle.min.js"></script>

<script>
$('document').ready(function(){

	/**
	* user defined functions
	*/
	jQuery.fn.jplist.settings = {
		
		/**
		* LIKES: jquery ui range slider
		*/
		likesSlider: function ($slider, $prev, $next){
			$slider.slider({
				min: 0
				,max: 350
				,range: true
				,values: [0, 350]
				,slide: function (event, ui){
					$prev.text(ui.values[0] + ' likes');
					$next.text(ui.values[1] + ' likes');
				}
			});
		}
		
		/**
		* LIKES: jquery ui set values
		*/
		,likesValues: function ($slider, $prev, $next){
			$prev.text($slider.slider('values', 0) + ' likes');
			$next.text($slider.slider('values', 1) + ' likes');
		}
	};
	
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">	
	
		<!-- jQuery UI range slider -->
		<!-- likesSlider and likesValues are user function defined in jQuery.fn.jplist.settings -->
		<div 
			class="jplist-range-slider"
			data-control-type="range-slider" 
			data-control-name="range-slider-likes" 
			data-control-action="filter"
			data-path=".like"
			data-slider-func="likesSlider" 
			data-setvalues-func="likesValues">
								
			<div class="value" data-type="prev-value"></div>
			<div class="ui-slider" data-type="ui-slider"></div>
			<div class="value" data-type="next-value"></div>
		</div>	
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>