Below is a basic jquery based slider for price ranges.
The slider is very basic. Next step would be to have the menu to the left and the pagination move along
Code:
<?php
$dataitems=modDatamenuHelper::getMinMax($params);
$min=floor($dataitems[0]['min']);
$max=ceil($dataitems[0]['max']);
$count=$dataitems[0]['c'];
if ( $count > 10 ) {
$url=$params->get( 'baselink', '' );
if ( $min >= $max ) { return; }
for ($v=1;$v<=9;$v++) { if ($x=$params->get("q$v",'')) { $url .="&q$v=".urlencode($x); } }
if ( $x=$params->get("q",'')) { $url .="&q=".urlencode($x); }
#add sort options
$url .='&format=raw&ajax=1&tmpl=component';
$doc =& JFactory::getDocument();
$doc->addStyleSheet( 'https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css');
$doc->addScript('https://code.jquery.com/ui/1.11.2/jquery-ui.min.js');
?>
<script>
jQuery(function() {
jQuery( "#slider-range" ).slider({
range: true,
min: <?php echo $min;?>,
max: <?php echo $max;?>,
values: [ <?php echo $min;?>,<?php echo $max;?> ],
slide: function( event, ui ) {
jQuery( "#amount" ).val( "Van " + ui.values[ 0 ] + " tot " + ui.values[ 1 ] +' Euro');
},
stop: function( event, ui ) {
url='<?php echo $url?>'+'&min='+ui.values[ 0 ]+'&max='+ui.values[ 1 ];
jQuery.get(url, function(data) {
if( data) {
jQuery('#main').html(data);
jQuery("img").show().lazyload({effect : "slideDown" });
jQuery('#main').scroll();
} else {
jQuery('#main').html('<h2>Geen producten gevonden voor deze prijzen</h2>');
}
});
}
});
jQuery( "#amount" ).val( "van " + jQuery( "#slider-range" ).slider( "values", 0 ) +
" tot " + jQuery( "#slider-range" ).slider( "values", 1 ) + ' Euro');
});
</script>
<label for="amount">Prijs :</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
<div style="width:50%;margin:0px auto" id="slider-range"></div>
<?php } ?>
