How to load JQuery UI Slider Content using ajax

[muhammed]

I Am using jQuery UI Slider to apply price filter to my opencart store content…
I try to load my content on $(document).on('change',function(){ but there is no use of it…
the content should be a load on change of value not on button submit…
here I am sharing my code with you… could you please help me to solve this…
hoping for the best…
thank you…

<div class="box sidebarFilter panel panel-default">
  <div class="panel-heading">{{ heading_title }}</div>
    <div class="list-group">
        <div class="list-group-item">
            <div id="filter-group1">
                <div id="scale-slider"></div>
            </div>
        </div>
    </div>
	<div class="panel-footer text-right">
		<button type="button" id="button-price-filter" class="btn btn-primary">{{ button_filter }} {{round.price_range_min}}</button>
	</div>
</div>

<script type="text/javascript">

$("#scale-slider")
            .slider({
            min: {{price_range_min}} ,
                    max: {{ price_range_max }} ,
                    range: true,
                    values: [ {{ price_range[0] ? price_range[0]:0 }} ,  {{ price_range[1] ? price_range[1]:price_range_max }} ]
            })


            .slider("float");
(function( $ ) {
  $(function() {
    $('#button-price-filter').on('click', function() {
		
		priceRange = [];
		$('#scale-slider .ui-slider-tip').each(function(){
			priceRange.push($(this).html());
		});
		
		$('.{{ product_class }}').hide();
		$('.clearfix').remove();
		$('.{{ product_class }}').each(function(){
			if( $(this).find( ".price span.price-new" ).length ) {
				var price = $(this).find( ".price span.price-new" ).html().replace('{{ price_code }}','').replace(',','');
			} else {
				var text = $(this).find('.price').html().replace('{{ price_code }}','');
				if( $(this).find( ".price span" ).length ) {
					var price = text.substring(0,text.indexOf('<span')).replace(',','');
				} else {
					var price = text.replace(',','');
				}
				
			}	
			
			price = parseInt(price);
			
			if( !isNaN(price) && (price > priceRange[0] && price < priceRange[1]) ){
				$(this).fadeIn("slow");
			}
		});
		
	});
  });
})(jQuery);


</script>

[m3g4p0p]

@muhammed

the content should be a load on change of value

Then you’d need to add a change listener to the slider; but note that it’s actually not a native change event, but a custom event called slidechange. So you could either specify a change handler in options-object:

$("#scale-slider").slider({
  // along with other options like min and max:
  change: function () {/* ... */}
})

Or add an event listener later:

$("#scale-slider").on('slidechange', function () {/* ... */})

Please refer to the API documentation for details.

[muhammed]

@m3g4p0p
Could you please apply this in my code… Am getting confused…
Thank you…

[m3g4p0p]

Well I have to say that your code is a bit hard to understand, especially with that template (handlebars?) syntax, which makes it kind of impossible to reproduce in a fiddle or something. But if I understood your question right, you’d basically need to replace this

$('#button-price-filter').on('click', function() {/* ... */})

with this

$("#scale-slider").on('slidechange', function () {/* ... */})

[muhammed]

It works great…
Thanks @m3g4p0p for you kind help
Thank you so much

[m3g4p0p]

No problem! :-)