Double range

Bonjour,

je suis actuellement en train de travailler sur un système de filtre avec MixItUp et un problème se pose.

j'utilise deux range, un pour les prix, un autre pour les surfaces, malheureusement seul le dernier utilisé est pris en compte. J'aimerai pouvoir combiner les deux.

Voila mon code:

$(".slider")
    .slider({
        max: 3000,
        range: true,
        values: [500, 1500],
        step: 50,
        orientation: "horizontal"
    })
    .slider('float', {
        prefix: prefixRs,
        suffix: "€"
    });

$(".slider").on("slidechange", function (event, ui) {
    var rangevalues = ui.values;
    var minValue = rangevalues[0];
    var maxValue = rangevalues[1];
    var filterValues = [];
    for (i = minValue; i <= maxValue; i += 5) {
        filterValues.push(".price-" + i);
    }

    //alert(filterValues.join(','));
    $('#Container').mixItUp('filter', filterValues.join(','));

});

// pour le slider des surfaces 

$(".slider_s")
.slider({
  max: 3000,
  range: true,
  values: [0, 1000],
  step: 50,
  orientation: "horizontal"
})
.slider('float', {
  prefix: prefixRs,
  suffix: "m²"
});

$(".slider_s").on("slidechange", function (event, ui) {
var rangevalues = ui.values;
var minValue = rangevalues[0];
var maxValue = rangevalues[1];
var filterValues = [];
for (i = minValue; i <= maxValue; i += 5) {
  filterValues.push(".surface-" + i);
}

Pourriez vous me mettre sur la trace de l'erreur ? Ou vers quelle autre structure me tourner ?