How to load JQuery UI Slider Content using ajax

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 class="panel-footer text-right">
		<button type="button" id="button-price-filter" class="btn btn-primary">{{ button_filter }} {{round.price_range_min}}</button>

<script type="text/javascript">

            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 }} ]

(function( $ ) {
  $(function() {
    $('#button-price-filter').on('click', function() {
		priceRange = [];
		$('#scale-slider .ui-slider-tip').each(function(){
		$('.{{ product_class }}').hide();
		$('.{{ 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]) ){


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:

  // 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.

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

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 () {/* ... */})

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

1 Like

No problem! :-)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.