filter by slider range

Question

While using price range slider It shows me all data according to price... thats fine

But, when I already select city for ex. Delhi. Then I want to see price range according to Delhi only

after selecting dropdown how its look

but then I dragging price range filter It giving other city detail also. That I don't want to see.

for example

My code begins here,

My model

    public function ajax($size = '',$sprice = '',$eprice = '')
{
     $query = "SELECT * from info_user Where user_status ='1'"; 

if(!empty($size)){
    $query  .= " and city in('".$size."')"; 
}
if(!empty($sprice) && !empty($eprice)){
    $query  .=  " and charge_per_hour >='".$sprice."' and charge_per_hour <='".$eprice."'"; 
}

 $result = $this->db->query($query);
 return $result->result();
}

My ajax price range filter code

  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 1000,
      max: 4000,
      values: [ 500, 4000 ],
      slide: function( event, ui ) {
        $( "#priceshow" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        $( ".price1" ).val(ui.values[ 0 ]);
        $( ".price2" ).val(ui.values[ 1 ]);
        $('.product-data').html('<div id="loaderpro" style=""></div>');

        $.ajax({
            url:"http://localhost/Speakertest/index.php/welcome/ajax",
            type:'post',
            data:{size:size,sprice:$(".price1" ).val(),eprice:$( ".price2" ).val()},
            success:function(result){
                $('.product-data').html(result);
            }
        });
      }
    });

    $( "#priceshow" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
     " - $" + $( "#slider-range" ).slider( "values", 1 ) );
}); 

This is code of dropdwon filter If you want to see

var size;
$(function(){
    $('.item_filter').change(function(){
        $('.product-data').html('<div id="loaderpro" style="" ></div>');


        var size = $(this).find(":selected").val();

        $.ajax({
            url:"http://localhost/Speakertest/index.php/welcome/ajax",
            type:'post',
            data:{size:size,sprice:$(".price1" ).val(),eprice:$( ".price2" ).val()},
            success:function(result){
                $('.product-data').html(result);
            }
        });
    });

});

Answer 1

 $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 1000,
      max: 4000,
      values: [ 500, 4000 ],
      slide: function( event, ui ) {
        $( "#priceshow" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        $( ".price1" ).val(ui.values[ 0 ]);
        $( ".price2" ).val(ui.values[ 1 ]);
        $('.product-data').html('<div id="loaderpro" style=""></div>');

        //EDITED PART
        var size = $(this).find(":selected").val();

        $.ajax({
            url:"http://localhost/Speakertest/index.php/welcome/ajax",
            type:'post',
            data:{size:size,sprice:$(".price1" ).val(),eprice:$( ".price2" ).val()},
            success:function(result){
                $('.product-data').html(result);
            }
        });
      }
    });

    $( "#priceshow" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
     " - $" + $( "#slider-range" ).slider( "values", 1 ) );
}); 

EDIT: I've made mistake while copy/pasting your code

REPLACE THIS:

var size = $(this).find(":selected").val();

TO:

var size = $('.item_filter').find(":selected").val();