title: ajax for getting value of jquery price slider on change
body: <p>I have implemented a price slider on my website in purpose of making a ajax filter which is well working with the <code>onclick</code> function and is able to send values when click on <code>id slider-range</code>, but i need to get the value of the amount whenever the amount changes. I have also checked some of the question earlier not working with code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      function showValues() {
    $("#productContainer").css("opacity",0.5);
    $("#loaderID").css("opacity",1);
    
    //e.css('visibility','visible');
    
      
    var mainarray = new Array();
    var pricearray1 = new Array();  
    $('#amount').each(function(){   
     pricearray1.push($(this).val());
     $('.spanpricecls').css('visibility','visible');  
    });
    if(pricearray1=='') $('.spanpricecls').css('visibility','hidden');
    var price_checklist1 = "&amp;price_range1="+pricearray1;
    
    var main_string = price_checklist1;
    main_string = main_string.substring(1, main_string.length)
    alert(main_string);
          
        $.ajax({
     type: "POST",
     url: "../../filter_products1.php",
     data: main_string, 
     cache: false,
     success: function(html){
      //alert(html);
      $("#productContainer").html(html);  
      $("#productContainer").css("opacity",1);
      $("#loaderID").css("opacity",0);
      
      
      
     }
     });
    
    
   }
     //calling ajax on selector  
  $("input[type='checkbox'], input[type='radio'], div#slider-range").on( "click", showValues );
    
    $(".spanpricecls").click(function(){
    $('.price_range').removeAttr('checked'); showValues();
    $('.spanpricecls').css('visibility','hidden');
   });
    
   $(".clear_filters").click(function(){
    $('#productCategoryLeftPanel').find('input[type=checkbox]:checked').removeAttr('checked');
    $('#productCategoryLeftPanel').find('input[type=radio]:checked').removeAttr('checked');
    showValues();
   });
   
  }); </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;jQuery UI Slider - Range slider&lt;/title&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
    &lt;script&gt;
    $(function() {
      $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
          $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
      });
      $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   
  &lt;p&gt;
    &lt;label for="amount"&gt;Price range:&lt;/label&gt;
    &lt;input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"&gt;
  &lt;/p&gt;
   
  &lt;div id="slider-range"&gt;&lt;/div&gt;
    &lt;div id=" productContainer"&gt;
  vxzcvcxzvvczzzzzzzxc
    
    &lt;/div&gt;
  
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>